Как все же правильно именовать классы в БЭМ?

Question

[webpixel]

Приветствую! Посмотрел кучу видео, прочитал огромное кол-во статей по БЭМ, но до сих пор нет полной картины в вопросе именования классов. Вот Я о чём, по логике именование классов в БЭМ происходит по такой логике:

block__element--modifier

в таком случае, в моем примере должно быть:

.menu {}
.menu__item {}
.menu__item--active {}
.menu__link

но почему-то везде встречаю вот такой код:

.menu {}
.menu__item {}
.menu_item_acitve {}
.menu__link

В каком тогда случае используется модификатор вида "menu__item--active" ?
На самом bem.info модификатор всегда пишут в стиле "btn_big_red".

И если честно это немного ставит в тупик. Подскажите пожалуйста, как правильно, что бы Я уже поставил для себя точку в этом вопросе. Спасибо!

Answer 1

[dm]

Внизу в комментах объяснение, что в англ. сети прижился вариант написания не тот, кот. был изначально. frontender.info/learning-to-love-bem
Потому и различия. А суть та же

Comments

[webpixel]

Ага, спасибо за ссылку, вижу не одного меня это озадачило. Значит могу писать как в моем первом примере, тоже считается правильным?

[dm]

webpixel: Пишу как в 1-м, а правильные оба, я так понимаю

Answer 2

[Олег Черр]

Рекомендую именовать классы так, как удобно лично вам (или вашей команде).
Лично мне очень не нравятся записи с двойным тире или подчёркиванием, и уж тем более модификаторы "ключ-значение". Смотрится очень громоздко, особенно когда у одного элемента несколько подобных классов.

.menu__item--active {}
.menu__item_state_active {}

Поэтому настоятельно рекомендую подстраивать бэм под себя. Подумайте над задачами, с которыми вы сталкиваетесь сейчас и столкнётесь в будущем, и решите их самым лаконичным способом. Вот, например, моя модификация бэм. Использую её уже несколько лет. Разработка стала очень приятной.

Answer 3

[Kater-auf-Dach]

Хотя решение есть и довольно давно, немного уточню и подправлю сам вопрос - если кто еще задается таким вопросом.
Строго говоря, в оригинальной нотации БЭМ класс.menu_item_active {} будет выглядеть как .menu__item_state_active {}.
Это случай модификатора типа «ключ — значение», полное имя которого создается по схеме:
block-name__elem-name_mod-name_mod-val.
Поэтому не btn_big_red, а btn_color_red и btn_size_big, то есть тут уже 2 модификатора.
Подробнее - в соглашении по именованию, в самом низу также есть раздел "Альтернативные наименования"