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

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

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".

И если честно это немного ставит в тупик. Подскажите пожалуйста, как правильно, что бы Я уже поставил для себя точку в этом вопросе. Спасибо!
  • Вопрос задан
  • 965 просмотров
Решения вопроса 1
@Chekhoved
Внизу в комментах объяснение, что в англ. сети прижился вариант написания не тот, кот. был изначально. frontender.info/learning-to-love-bem
Потому и различия. А суть та же
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
OlegCherr
@OlegCherr
Запрограммлю всё что угодно (Web/Android)
Рекомендую именовать классы так, как удобно лично вам (или вашей команде).
Лично мне очень не нравятся записи с двойным тире или подчёркиванием, и уж тем более модификаторы "ключ-значение". Смотрится очень громоздко, особенно когда у одного элемента несколько подобных классов.

.menu__item--active {}
.menu__item_state_active {}

Поэтому настоятельно рекомендую подстраивать бэм под себя. Подумайте над задачами, с которыми вы сталкиваетесь сейчас и столкнётесь в будущем, и решите их самым лаконичным способом. Вот, например, моя модификация бэм. Использую её уже несколько лет. Разработка стала очень приятной.
Ответ написан
Комментировать
Kater-auf-Dach
@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 модификатора.
Подробнее - в соглашении по именованию, в самом низу также есть раздел "Альтернативные наименования"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы