Как стилизовать компоненты React используя методологию BEM?

Question

[sowefap339]

Есть такой элемент:

<div class="dropdown">
      <div class="dropdown__select">---</div>
      <div class="dropdown__content">
        <div class="dropdown__item">BMW</div>
        <div class="dropdown__item">Audi</div>
        <div class="dropdown__item">Reno</div>
      </div>
    </div>

Хочу все это разделить еще на компоненты, например:
Dropdown - будет равен `dropdown`
DropdownSelect = `dropdown__select`
DropdownContent = `dropdown__content`

И тут не понимаю, где должны быть стили, все стили должны быть внутри Dropdown основного компонента, или каждый внутри своих компонентов? Если каждый внутри своих компонентов, то получается что элементы отдельно от блоков находятся. И как правильнее будет их разделить?

Answer 1

[Alexey Levicky]

Все зависит от способа стилизации и структуры вашего проекта. Реакт не диктует как делать, вы сами решаете.
Лучшими практиками лично я считаю использование изолированных стилей, что исключает использование БЕМ так как каскады и специфичность исключается в таких решениях.
Из опыта (и личных предпочтений) советовал бы смотреть в сторону css-modules, css-in-js, styled-components, emotion
Но если Вы все таки предпочитаете классический подход стилизации, то на самом деле нет разницы где хранить файл стилей — в родительском компоненте или в дочерних (конкретно в Вашем случае).
Но я настоятельно рекомендую рассмотреть технологии для стилизации которые более органично сочетаются с парадигмами реакта

Comments

[sowefap339]

Мне именно нужен это момент разобрать, да я использую css-modules, styled-components.

Вот я не могу понять (с точки зрения БЕМа) `dropdown` считается блоком, и все что связано с ним, привязываются к `dropdown__**` имени, а с точки зрения React, я могу этот же компонент разделить еще на мелкие компоненты, и получается что эти компоненты не являются блоками, но существуют сами по себе. То есть начинаются с элемента, а не имени блока. (Мозг просто взрывается)

[Alexey Levicky]

Если Вы используете css-modules/styled-components то БЕМ не нужен

[Alexey Levicky]

вот простой пример
https://codesandbox.io/s/amazing-chihiro-csqsyf?fi...

[sowefap339]

Aleksey Levickyj, Я имел ввиду что я использую их, но не в этом примере. Здесь именно этот кейс разобрать не могу.

[Alexey Levicky]

Ну тогда разбиваете на компоненты, в каждый должен приходить проп classNames а стили кладете в корневую папку компонента dropdown и используете БЕМ

[Alexey Levicky]

https://codesandbox.io/s/amazing-chihiro-csqsyf?fi...
пример компонент DropdownBEM

[sowefap339]

Aleksey Levickyj, я так же написал код (классы):

const Menu = ({ options }) => (
  <ul className="dropdown__menu">
    {options.map(({ title, id }) => (
      <li className="dropdown__item" key={id}>
        {title}
      </li>
    ))}
  </ul>
);

Меня смутило что компонент теперь начинается с класса `dropdown__menu`, с точки зрения BEMa в мою картину мира что-то это не укладывается. В BEMе не должны существовать элементы сами по себе. Вот это и не понтно, видимо, наврное так и пишут те кто бем используют, или .... хз даже.

[sowefap339]

Aleksey Levickyj,Спасибо Вам за ответы и примеры!