MrCheater May 11 2016 at 12:13

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

6 min

89K

Developer Soft corporate blogJavaScript*ReactJS*

Tutorial

From sandbox

+26

Comments 10

Murmurianez May 11 2016 at 12:43

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

f0rmat1k May 11 2016 at 12:43

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

JiLiZART May 11 2016 at 13:59

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

ElianL May 11 2016 at 15:32

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

rosko May 15 2016 at 01:24

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

f0rmat1k May 15 2016 at 08:26

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

FanAs May 11 2016 at 13:55

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

Ronnie_Gardocki May 11 2016 at 17:59

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

Kelly May 12 2016 at 11:11

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

f0rmat1k May 13 2016 at 18:05

Поздравляю, вы только что открыли для себя БЭМ)
В БЭМе компонент (блок) итак подразумевает 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 элемента с лаконичными именами, реже модификаторы.