Чем в 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?
Имхо css-modules – золотая середина. Простое и надежное решение, без js рантайма и других проблем css-in-js. Но оно точно намного лучше просто БЭМ нейминга: меньше мороки с именами классов, приятнее выглядит в коде, точно не будет коллизий, линтер тебе может подсказывать о неправильных именах классов.
Последние два года и для своих проектов, и на работе перевел все на tailwind и горя не знаю.
Из плюсов:
В минусы могу записать необходимость настройки purgecss, иначе бандл с дефолтным теилвиндом будет огромен
Использую 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.
Если нравится css-in-js подход и хочется zero-runtime, то можно попробовать https://github.com/callstack/linaria
Я предпочитаю избегать препроцессоры, потому что не нужно изучать и знать доп технологию. CSS Modules даже и не трогал, сразу начинал с css-in-js и не вижу причин менять для себя
Мне нравится больше всего как работа со стилями устроена в Свелте. Плюсану
css-modules, они к этому, наверное, ближе всего.У styled-components были проблемы с производительностью.
Если хочется CSS-in-JS, можно посмотреть на JSS, если нужны динамические стили (лучше их всё же избегать). Для статических стилей можно посмотреть на Astroturf или Linaria, они позволяют собрать стили заранее и не тащить их в рантайм.
Про CSS Modules соглашусь — самое оно. Правда, у нас даже противники БЭМа внезапно поняли, что без него тяжеловато. Поэтому пришлось рожать свой велосипед, который по сути тот же БЭМ, только Блок заменён на CSS Module :: https://www.npmjs.com/package/cssmem :: (осторожно: локальные велосипеды, недописанный README).
Сейчас использую стайледы с Некстом, очень нравится инкапсуляция стилей и возможность наследоваться от других стилей; а ещё кастомить компоненты либ приятно, так что мой выбор - стайледы
Покури все что есть. Технологии приживаются на проектах не потому что они правильные, а потому что подходят к стеку и команде.
У нас были styled-components, но я их начал выпиливать. Просто импорт scss + какой-то адекватный нейминг вполне ок и не тащит за собой еще одну либу. А еще у меня мнение что когда у тебя
<divа не<TextComponentэто понятно что никакой js-логики в нем нет. В то же время как styled размывает эту границу.Для CSS Modules в аббревиатуре «CSS» одна буква лишняя.
скажу самую менеджерскую фразу в мире:
не важно что именно ты будешь использовать, если оно позволяет выполнять то, что требуется по твоей спеке.
Это даже не повлияет на общее количество работы (без шуток - импакт минимальный). Нет правильного или неправильного решения - бери то, что хотят программисты или то в чем они уже хороши
Для SSR лучше не использовать styled-components, так как всё равно происходит rehydrate и это сказывается на производительности. Добиться хорошего скора в SEO рейтинге гугла для мобилок и так сложно, а с css-in-js станет почти нереально.