Использование наследования по БЭМ

Форум /

Здравствуйте. Недавно начал изучать БЭМ. Отказ от наследования дается мне тяжело. Нужен совет как лучше обыграть некоторые ситуации. 1) Ситуация с табами. Имеются стили для меню табов по умолчанию.

.tab-nav {}
.tab-nav__list {}
.tab-nav__item {}
.tab-nav__link {}

По дизайну есть несколько видов табов. Как правильно по БЭМ стилизовать табы? Использовать модификаторы для каждого элемена?

.tab-nav--news {}
.tab-nav__list--news {}
.tab-nav__item--news {}
.tab-nav__link--news {}

Или можно обойтись каскадом?

.tab-nav--news {}
.tab-nav--news .tab-nav__list {}
.tab-nav--news .tab-nav__item {}
.tab-nav--news .tab-nav__link {}

Еще ситуация с активным элементов. Плагин ставит свой класс активного элемента. Допускается ли такая каскадная стилизация активного элемента?

.tab-nav__item.ui-tabs-active .tab-nav__link {}

2) Ситуация когда по наведению на один элемент меняются стили соседних/вложенных элементов. Допусти при наведении на ссылку нужно показывать скрытый блок(менять его цвет и т.д.) в соседнем элементе.

<div class="item">
    <a class="item__link link-action">link</a>
    <div class="item__body">
        <div class="item__info">hidden</div>
    </div>
</div>

.item__link:hover + .item__body .item__info {}

Допускается ли такая запись по БЭМ? Как записать правильней?

3) Наименование классов. По БЭМ имя класса пишется так блок__элемент--модификатор-элемента. Допускается ли такая запись блок--модификатор-блока__элемент?

9 years ago

tadatuta

1) Для стилизации нескольких видов табов вполне подходит пример со вложенными селекторами. Подробнее см. https://ru.bem.info/method/faq/#Почему-в-БЭМ-не-рекомендуется-использовать-комбинированные-селекторы-для-создания-css-правил-к-модификатору

Вариант с активным элементом тоже совершенно уместен.

2) Вложенные селекторы при ховере — тоже нормально :)

3) Наименование классов.

По БЭМ имя класса пишется так блок__элемент--модификатор-элемента.

Классический вариант — использование одинарного подчеркивания в качестве разделителя модификатора (блок__элемент_модификатор-элемента), но в целом можно использовать любые разделители. Подробнее см. https://ru.bem.info/method/naming-convention/

Допускается ли такая запись блок--модификатор-блока__элемент?

В классическом варианте — нет. Отказ от такого подхода связан со сложностями его применения в JS: модификаторы должны мочь изменяться динамически (например, при изменении активного элемента меню при клике) и такие селекторы потребуют гораздо больше усилий по приведению DOM в нужное состояние.

Чтобы оставлять комментарии, необходимо авторизоваться.