Как оформить такой html в стиле БЭМ?

Question

[gERYH]

Приветствую всех, знатоков! Можете мне пожалуйста разъяснить вот такой вопрос. Допустим у нас есть html

<a href="#" class="block">
   <span class="block__element">span</span>
   <span class="block__element2">span2</span>
</a>

И задача состоит в следующем, нужно при hover эффекте на .block, изменить .block__element как то по своему и .block__element2 как-то по своему.
В голову сразу приходит идея

.block:hover .block__element{
    color: green;
}
.block:hover .block__element2{
    color: red;
}

Но, увы это противоречит БЭМ методологии, так как уже выплывает каскад в стилях. Как же решают такой вопрос "по-БЭМовски"? Не уж-то javascript нужно крепить? Это же громозко и не удобно ещё и js лепить, легче же и более кроссбраузерно решить через css эту проблему. Пытался что-то найти в документации, посмотрел мастер классы от Яндекс-разработчиков, так и не узнал решение, точнее на этом никто просто не акцентировал внимание, хотя проблема может и заключаться в других ситуациях когда нужно прикрепить на главный блок модификатор --active и при active дочерним элементам задать стиль.

Answer 1

[Андрей Хохлов]

Не вижу ничего криминального в том чтобы сделать в данном случае каскад.

Если не ошибаюсь в БЭМ речь о минимизации каскада, а не в полном отказе от него.

Тем более если из всего БЭМ вы используете только соглашение о наименовании и общие принципы.

БЭМ ведь не Священное писание, а просто методология, инструмент, который никто не запрещает настраивать для себя.

Comments

[gERYH]

Благодарю, хух как камень с души!)

Answer 2

[Виталий Инчин ☢]

Так и делается.

Это селектор вида block(mod) element, он не выходит за рамки БЭМ.

(К примеру .block--left .block__element)

Просто модификатором выступает псевдокласс.

Comments

[gERYH]

Спасибо, что разъяснили и охладили мой пыл, а то уж начал javascript писать, как альтернативу CSS эффектам!)

[copal]

он не выходит за рамки БЭМ.
Но ведь это уже БМЭ или БМЭМ?

[Виталий Инчин ☢]

copal: пхах, в БЭМ разрешены такого рода каскады. Сами подумайте, как без них:

.list.list--vertical .list__li{}

[Виталий Инчин ☢]

copal: п.с: что БМЭ, что МЭБ, что БЭМ - смысл один. Три структурных единицы: Блок, элемент, модификатор.

[copal]

Виталий Инчин ☢: на сколько мне известно работники яндекса Вас бы отпинали за такой НЕДОПУСТИМЫЙ пример :)

[Виталий Инчин ☢]

copal: ваши варианты?

[Андрей Хохлов]

copal: да ладно: take.ms/B1aiP =)

[copal]

Андрей Хохлов: то что Вы показали отличается от того что показал автор поста. БЭМ это не просто набор символов, в него заложена идея которая нарушена у автора ответа.

[Андрей Хохлов]

copal: чем отличается? в обоих случаях есть каскад, только на скриншоте каскад от Элемента к другому Блоку.

[copal]

Андрей Хохлов: посмотрите внимательно и скажите чем является .list--vertical?
.list.list--vertical .list__li{}

[Андрей Хохлов]

copal: модификатором блока

[copal]

Андрей Хохлов: получается что .list - блок и .list--vertical тоже блок, но уже другой?

[Андрей Хохлов]

copal:
.list - это блок, который по сути создает неймспэс.
.list--vertical - это модификатор этого блока (в его неймспэйсе)

[copal]

Андрей Хохлов: а разве не так - .list это неймспейс, а .list--vertical это другой блок с модификатором --vertical? А может ещё быть блок .list--horizontal... То есть в немспейсе образующего блока .list существуют два других блока --vertical и --horizontal, которые вынесены, которые могут использоваться отдельно?

[Андрей Хохлов]

copal: в данном случае "неймспейс" это та недостающая фича css, которую реализует БЭМ за счет Блока. И мы спокойно пишем стили внутри блока, не боясь конфликтов. Вы согласны с этим?

Я не вижу подтверждения возможности использования модификатора отдельно от его "хозяина" (модификатор может быть и у блока и у элемента). Да и глупо это, сама суть модификатора в изменении/дополнении свойств блока/элемента.

Ссылки подтверждающие невозможность использования класса модификатора отдельно от модифицируемого класса:
https://ru.bem.info/methodology/faq/#Как-сделать-г...
https://ru.bem.info/methodology/faq/#Зачем-писать-...

Кстати у Яндекса немного другой, на мой взгляд менее приятный, синтаксис БЭМ.
Я предпочитаю такой: https://css-tricks.com/bem-101/ (собственно о таком мы и говорим в этом вопросе)

[Виталий Инчин ☢]

Андрей Хохлов: слава Гарри Робертсу)))