Комментарии 18
Я совсем недавно задался вопросов «Почему до сих пор популярна методология БЭМ, когда есть CSS Modules?» в slack #web-standards и написал свои мысли, но меня сообщество не поняло.
Ваш пост многое разъяснил.
Ваш пост многое разъяснил.
Очень рекомендую интересующихся посмотреть на этот плагин для бейбеля react-css-modules
Использовать или нет — ваш выбор, но удобство использования css modules увеличивает сильно (недостатком является неявное использование переменных, что в общем случае зло).
А что делать, если нужно несколько классов использовать?
<div classNames={[styles.base, styles.clickable, styles.withIcon].join(' ')} />нашёл такой вариант
В общем, логично. Это же просто сгенерированные уникальные имена классов, чего же их не собрать в одну строку. С другой стороны мне нравится идея думать, что класс определяет состояние компонента. Ну, например, кнопка может быть .enabled или .disabled. Если у состояний есть что-то общее, то мы выделяем общий класс и через compose используем его в «классах-состояниях».
как то костыльно выгядит
Не совсем ясно, можно ли как-то попробовать css модули без реакта с вебпаком, а например с помощью gulp-а? Для обычных нормальных простых сайтов, которые рендерятся на сервере…
Думаю, можно. Сам я не пробовал, но по сути CSS Modules — это всего лишь один из множества плагинов для PostCSS. Значит, надо смотреть в сторону настройки PostCSS для gulp. А про PostCSS есть отличный доклад Андрея Ситника.
Кажется CSS Modules относится не к PostCSS, а скорее к css-loader
Насколько, я понимаю, CSS Modules — это концепция, которую можно организовать разными способами. css-loader вебпака поддерживает их. И через PostCSS можно реализовать. Вот есть плагин: https://github.com/css-modules/postcss-modules. Да и в самом докладе Андрей рассказывает, как включить CSS Modules при использовании gulp.
Спасибо, очень познавательно, только не совсем понял, а что если у меня в блоке несколько несвязанных классов? Например
class="ti-bell menu-icon"
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Практическое руководство по использованию CSS Modules в React приложениях