Стилизация React-компонентов

[@Murmurianez]

Как то даже удивительно — в статье нет упоминания о CSS-loader. На мой взгляд ровно то что нужно. Во всяком случае явных недостатков не нашёл.

[@f0rmat1k]

Для того, чтоб не писать БЭМ руками, есть модуль b_.

[@JiLiZART]

Я с него перешел на https://github.com/albburtsev/bem-cn как мне кажется у последнего более лаконичный синтаксис

[@ElianL]

Смотрели, не понравилось.
Написали свое react-bem-classes — может кому понравится

[@rosko]

Народ, объясните, зачем Реакту БЭМ? CSS modules имхо полностью решают все проблемы самой малой кровью

[@f0rmat1k]

Ну, при условии, что БЭМ не пишется руками — то оба решения на самом деле предлагаю примерно одно и то же одной и той же кровью. Так что да, вполне можно использовать их.

[@FanAs]

Проще использовать связку компонент + className с именем компонента + .less файл под каждый компонент с одинаковым названием. Избавляет от множества проблем и компоненты выглядят небольшими, без необходимости изучать что-то кроме CSS

[@Ronnie_Gardocki]

А потом внезапно появляется задача, где надо внутри одного компонента заюзать пару кусков из другого. В обычных «глобальных» бэм стилях вы бы просто применили нужные классы в разметке и все бы работало идеально. А тут что? Копипастить? И не говорите только что такие ситуации редко встречаются.

[@Kelly]

Копипастить. Потому что если начать использовать куски с других мест — потеряется сама идея компонентов. И будет больше вероятность что что-то сломается если вы поменяете код в другом месте

[@f0rmat1k]

Поздравляю, вы только что открыли для себя БЭМ)
В БЭМе компонент (блок) итак подразумевает className в стилях по имени компонента. Просто если появится больше 1-го дочернего тега в компоненте, то Элементы из БЭМа так или иначе понадобятся (className__elemName). Совсем необязательно (и не стоит) использовать БЭМ, как приводят в примерах всякие клевые бэмоненавистники:

<a class="link link__control menu-list__link menu-list__link_type_simple menu-list__link_size_small i-bem"></a>

Чаще всего нормальная компонента, это блок и ~ 3 элемента с лаконичными именами, реже модификаторы.