БЭМ CSS, глобальные переменные и именование классов

Я пытаюсь определить подход к стандартизации классов в CSS для использования в нескольких проектах.

Я понимаю, что модель BEM позволяет упростить разработку, указав элементы блочного уровня для автономного стиля. Меня беспокоит этот подход в обработке глобальных элементов.

Пример:

У меня есть два «модуля»: Новости и События. В обоих модулях есть список элементов, но на сайте 1 модули идентичны, а на сайте 2 у них довольно уникальные стили.

Текущее понимание:

Это сообщение от 2014 года заставляет меня поверить, что лучшим подходом будет:

<div class="news news--listing module module--listing">...</div>
<div class="events events--listing module module--listing">...</div>

Я чувствую, что это может быть лучшим подходом, поскольку любой глобальный стиль может быть обработан в module__listing, и если требуется уникальность, доступны определенные классы.

Хотя с здешними детьми мне сложнее. Скажем, у обоих есть список предметов, как к этому можно подойти хорошо? Пример:

<div class="news news--listing module module--listing">
    <ul class="news__list item__list">
       <li class="news__item item">...</li>
    </ul>
</div>

Это похоже на перебор, но я не уверен в лучшем решении. Могу ли я просто сохранить это соглашение об именах в списке дочерних элементов?

Вопрос:

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


css naming-conventions bem
person Stu Furlong    schedule 05.10.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Блок, элемент, методология модификатора (BEM)

Используя ваш пример, это будет выглядеть так:

<div class="[block]">
    <ul class="[block__element1]">
       <li class="[block__element2]">...</li>
       <li class="[block__element2] [block__element2--modifier]">...</li>
    </ul>
</div>

Тогда ваш код будет выглядеть так:

<div class="news">
    <ul class="news__list">
       <li class="news__item">...</li>
       <li class="news__item news__item--selected">...</li>
    </ul>
</div>

Обратите внимание, что за модификатором (news__item--selected) всегда следует класс элемента (news__item).

Больше информации:

Документация BEM, быстрый старт: https://en.bem.info/methodology/quick-start/

БЭМ на примере: https://seesparkbox.com/foundry/bem_by_example

person Treedbox    schedule 16.03.2019

arrow_upward
1
arrow_downward

Вы можете использовать концепцию уровней переопределения, чтобы иметь разные стили для одни и те же объекты в разных проектах и ​​по-прежнему сохраняя общий код в одном месте без добавления дополнительных module объектов.

person tadatuta    schedule 05.10.2018