Чем в 2020 стилизуют фронтенд и какие подводные камни?  Публичный пост

Стартую новый проект и хочу заиспользовать удобную технологию, да так, чтобы в будущем не хотелось себя ругать за неверный выбор.

За свою фронтовую карьеру я успел пописать на всем, что было на рынке до 2018 года. Но потом на год выпал из темы и погрузился в поддержку легаси на HTML + jQuery + LESS.

В новом проекте (React с SSR) я рассматриваю несколько вариантов стилизации:

  • SCSS + css-modules
  • SCSS + БЭМ-нейминг
  • styled-components
  • что-то новое и крутое

Мне кажется, что максимальное удобство и комфорт дает нам styled-components. Но найти что-то разумное по запросу "Стоит ли использовать styled-components в 2020?" не получилось — куча статей из 2018, что как бэ намекает...

Единственная сложность с которой я столкнулся при работе со styled — отсутствие стилей в вебвизоре, которая видимо так и не была решена Яндексом.

Стоит ли вообще работать со styled-components или это уже прошлый век? Что сейчас умные дядьки используют для стилизации? Какие вы еще знаете проблемы со styled-components и как их решали?

Знаю, что у styled есть альтернативы типа emotionjs и прочие glamorous, но у них гораздо меньше комьюнити и особых различий со styled я не вижу. Сменить одну либу на другую можно за 10 минут.

Еще мне нравится svelte с их компонентным подходом, но svelte мы использовать не готовы, потому что у всей команды хорошая экспертиза в React, а svelte добавляет рисков. Есть ли похожая штука для React?

10 комментариев 👇

Имхо css-modules – золотая середина. Простое и надежное решение, без js рантайма и других проблем css-in-js. Но оно точно намного лучше просто БЭМ нейминга: меньше мороки с именами классов, приятнее выглядит в коде, точно не будет коллизий, линтер тебе может подсказывать о неправильных именах классов.

  Развернуть 1 комментарий

а какие проблемы есть у css-in-js?

  Развернуть 1 комментарий
Denis Smirnov, Фронтенд 26 мая 2020

Мне нравится больше всего как работа со стилями устроена в Свелте. Плюсану css-modules, они к этому, наверное, ближе всего.

  Развернуть 1 комментарий
Илья Заяц, самый нудный 26 мая 2020

Последние два года и для своих проектов, и на работе перевел все на tailwind и горя не знаю.

Из плюсов:

  • это css, a значит нет всех сопутствующих проблем css-in-js
  • уже из коробки адекватные дефолтные значения, но если что-то надо изменить, то делается в одну строчку
  • чаще всего новый css писать вообще не надо: никакого add-only и нет страха рефакторинга. Плюс тот css, что подгружается в итоге используется везде (или почти везде)
  • плюс в команде: вы начинаете говорить на одном языке. Это далеко не дизайн-система, но явно лучше всего кастомного каждый раз

В минусы могу записать необходимость настройки purgecss, иначе бандл с дефолтным теилвиндом будет огромен

  Развернуть 1 комментарий

А вот это интересная штука, спасибо!

  Развернуть 1 комментарий
Eugene Rogach, Front End Engineer 27 мая 2020

Использую styled-components с первых версий.

Рантайм - SC конечно не быстрее статичного css, но рантайм позволяет делать динамический css, то, что и в обычной жизни приходилось делать через JS. При этом critical path стили, попрежнему можно оставить в css файлах.

Удобно, не нужно писать classNames, генерить кучу классов под разные состояния и разруливать какие классы применить в общем jsx коде. Удобно наследовать стили(делать это в разных файлах), все можно описать с if блоками в функции, использовать темы и мерджить их. Да все что js позволяет делать - все можно.

Легче создавать design-system, ui-kit etc.

Тестирование динамических стилей и разных вариаций комопнента. Работает снапшот тестирование.

Вывод
SC(как и все css in js) не заменяет css, все также можно использовать статичные файлы или инлайн стили для ускорения первой загрузки. Но для рутинной, нелюбимой работы со стилизацией компонентов, справляется отлично, также как jsx & hml.

  Развернуть 1 комментарий

У styled-components были проблемы с производительностью.

Если хочется CSS-in-JS, можно посмотреть на JSS, если нужны динамические стили (лучше их всё же избегать). Для статических стилей можно посмотреть на Astroturf или Linaria, они позволяют собрать стили заранее и не тащить их в рантайм.

Про CSS Modules соглашусь — самое оно. Правда, у нас даже противники БЭМа внезапно поняли, что без него тяжеловато. Поэтому пришлось рожать свой велосипед, который по сути тот же БЭМ, только Блок заменён на CSS Module :: https://www.npmjs.com/package/cssmem :: (осторожно: локальные велосипеды, недописанный README).

  Развернуть 1 комментарий
Maxim Syabro, Стартапы, вебдев, фото, техно 26 мая 2020

Покури все что есть. Технологии приживаются на проектах не потому что они правильные, а потому что подходят к стеку и команде.

У нас были styled-components, но я их начал выпиливать. Просто импорт scss + какой-то адекватный нейминг вполне ок и не тащит за собой еще одну либу. А еще у меня мнение что когда у тебя <div а не <TextComponent это понятно что никакой js-логики в нем нет. В то же время как styled размывает эту границу.

  Развернуть 1 комментарий
Max Lyuchin, Code Wrangler 27 мая 2020

Для CSS Modules в аббревиатуре «CSS» одна буква лишняя.

  Развернуть 1 комментарий
Vladimir Gorshunov, Фронтенд разработчик 27 мая 2020

Если нравится css-in-js подход и хочется zero-runtime, то можно попробовать https://github.com/callstack/linaria
Я предпочитаю избегать препроцессоры, потому что не нужно изучать и знать доп технологию. CSS Modules даже и не трогал, сразу начинал с css-in-js и не вижу причин менять для себя

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб