Модификатор блочного элемента - Использование БЭМ без «Элемента»? - PullRequest
Новая
       20

Модификатор блочного элемента - Использование БЭМ без «Элемента»?

2 голосов
/ 13 мая 2019

Хотя я какое-то время работал с CSS (и другими препроцессорами CSS), я все еще не совсем уверен в том, что касается соблюдения Модификатора блочного элемента (BEM) .

Предположим, мы следуем именно этому формату БЭМ: 

block-name__element-name_modifier-name_modifier-value

Могу ли я узнать, допустимо ли указывать класс без element-name? Это означает, что у нас есть только блок, за которым следует модификатор.

Вот пример: 

<div class="menu_light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list_light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

Как видно из приведенного выше блока кода, класс .menu_light-theme действует как «обертка» для меню, а имя класса содержит только модификатор block и .

Я понимаю, что это субъективно, но мне интересно, соответствует ли это БЭМ, и, конечно, я открываю предложения о том, как я могу справиться с такими ситуациями, когда элемент БЭМ может показаться «избыточным» .

1 Ответ

1 голос
/ 13 мая 2019

Конечно, вы можете, это на самом деле в документации : 

.button--state-success {...}

В вашем примере, мы могли бы сделать что-то вроде этого (не забудьте поставить две черточки для модификатора): 

<div class="menu--light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list--light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>
...