Практическое руководство по использованию CSS Modules в React приложениях

[hazratgs]

Я совсем недавно задался вопросов «Почему до сих пор популярна методология БЭМ, когда есть CSS Modules?» в slack #web-standards и написал свои мысли, но меня сообщество не поняло.
Ваш пост многое разъяснил.

[jt3k]

Потому что бэм это не только изоляция имён классов

[kahi4]

Очень рекомендую интересующихся посмотреть на этот плагин для бейбеля react-css-modules

Использовать или нет — ваш выбор, но удобство использования css modules увеличивает сильно (недостатком является неявное использование переменных, что в общем случае зло).

[hazratgs]

Очень интересно, спасибо буду пробывать

[Alexey_Solomatin]

Тоже смотрел на этот плагин. Поскольку опыта в фронтэнде мало, пока решил ограничиться обычными CSS Modules. Наверное, основная фича — возможность смешивать локальный и глобальный CSS. Мне на проекте такое пока не требуется, но так-то всё может быть.

[WebProd]

А что делать, если нужно несколько классов использовать?

[WebProd]

<div classNames={[styles.base, styles.clickable, styles.withIcon].join(' ')} />

нашёл такой вариант

[Alexey_Solomatin]

В общем, логично. Это же просто сгенерированные уникальные имена классов, чего же их не собрать в одну строку. С другой стороны мне нравится идея думать, что класс определяет состояние компонента. Ну, например, кнопка может быть .enabled или .disabled. Если у состояний есть что-то общее, то мы выделяем общий класс и через compose используем его в «классах-состояниях».

[WebProd]

избыточность css кода, нет?

[Alexey_Solomatin]

Ну да, есть такое.

[anton9408]

как то костыльно выгядит

[Voronar]

Стандарт де-факто

[Alexey_Solomatin]

О, спасибо! Позволит избежать сборки собственного велосипеда.

[noodles]

Не совсем ясно, можно ли как-то попробовать css модули без реакта с вебпаком, а например с помощью gulp-а? Для обычных нормальных простых сайтов, которые рендерятся на сервере…

[Alexey_Solomatin]

Думаю, можно. Сам я не пробовал, но по сути CSS Modules — это всего лишь один из множества плагинов для PostCSS. Значит, надо смотреть в сторону настройки PostCSS для gulp. А про PostCSS есть отличный доклад Андрея Ситника.

[hazratgs]

Кажется CSS Modules относится не к PostCSS, а скорее к css-loader

[Alexey_Solomatin]

Насколько, я понимаю, CSS Modules — это концепция, которую можно организовать разными способами. css-loader вебпака поддерживает их. И через PostCSS можно реализовать. Вот есть плагин: https://github.com/css-modules/postcss-modules. Да и в самом докладе Андрей рассказывает, как включить CSS Modules при использовании gulp.

[mekhaga]

Спасибо, очень познавательно, только не совсем понял, а что если у меня в блоке несколько несвязанных классов? Например

class="ti-bell menu-icon"