Чем в 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?

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

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

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

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

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

@EugeneRogach, да он просто бесячий уже тем, что это не полноценный css, поэтому там надо всё время держать в голове этот конченый синтаксис и страдать с тем, что линтеры для стилей через раз его хотят нормально парсить. Да и постоянная возня с передачей js объектов тоже задалбывает. Имхо цсс-модули на порядок приятнее – настроил, и вообще не паришься

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

@kadron141, а еще рантайм пиздец медленный местами. зачем мне вообще тормозить рантайм генерацией стилей, там и так своих проблем полно

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

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

Из плюсов:

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

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

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

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

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

@zayats, я бы в тейлвинд добавил еще пару минусов.

  • надоедает бойлерплейтинг
  • сложности в кастомизации/расширении компонентов
  Развернуть 1 комментарий

@zayats, пришел сюда написать про Tailwind. К плюсам я бы еще добавил, что он развивается какими-то бешеными темпами.

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

Использую 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 комментарий
Vladimir Gorshunov , Фронтенд разработчик 27 мая 2020

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Развернуть 1 комментарий
Andrew , Мечтатель кинжалов 23 июля 2021

скажу самую менеджерскую фразу в мире:
не важно что именно ты будешь использовать, если оно позволяет выполнять то, что требуется по твоей спеке.
Это даже не повлияет на общее количество работы (без шуток - импакт минимальный). Нет правильного или неправильного решения - бери то, что хотят программисты или то в чем они уже хороши

  Развернуть 1 комментарий
Игорь Кузнецов , фронтендер, люблю кататься 23 июля 2021

Для SSR лучше не использовать styled-components, так как всё равно происходит rehydrate и это сказывается на производительности. Добиться хорошего скора в SEO рейтинге гугла для мобилок и так сложно, а с css-in-js станет почти нереально.

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

@gare4ka, там разве какие-то серьезные различия по цифрам производительности?

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

@ganqqwerty, Настолько, что даже React выкидывают: https://fwdays.com/en/event/javascript-fwdays-2020/review/throwing-reactjs-away

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

@dottedmag, @ganqqwerty, Да. Если хочешь нормально индексироваться и иметь нормальную интерактивную часть в 2021, то лучше всего так:

  1. Все статические части рендеришь на сервере и больше не трогаешь. Т.е. можешь использовать реакт на сервере, но только, чтобы он тебе обычную строку возвращал
  2. Весь интерактив делаешь на клиенте отдельными ленивыми компонентами/виджетами/вотэва. Т.е. на каждый свой реакт/вью/вотэва
  Развернуть 1 комментарий

😎

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

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


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