На сколько могут быть длинными модификаторы в БЭМ?

Question

[AlexNew22]

Подскажите, как правильно сделать такой блок по БЭМ?
В моем случае получается, что модификаторы растягиваются
А если делать все не через profile__, то у меня в блоке получится 3 бэм блока, которые после уменьшат мне варианты названия других основных блоков на странице
https://codepen.io/user2022nn/pen/MWrqyrw

Comments

[Ankhena]

Прочитайте про миксы в БЭМ. Раз вы пытаетесь в таком стиле называть классы.

Либо упрощать названия profle__page-contacts-phone -> profle__phone

Answer 1

[Максим Морев]

* Это не модификаторы, а элементы

Длинными могут быть настолько, насколько это требуется, и в количестве любом, методология это не регламентирует.

В какой-то момент вы упрётесь в то, что объём стилей блока становится невозможным для поддержки и нужно его декомпозировать на блоки поменьше.
Если это сразу очевидно, то и декомпозировать лучше сразу.

уменьшат мне варианты названия других основных блоков на странице

Создавайте внутренние блоки с общим неймспейсом, в вашем случае основной компонент - `profile`, внутренние - `profile-info`, `profile-page`, и складывайте их так, чтобы связь родитель-ребёнок между блоками была очевидна.
Ну, да, в таком случае формально вы больше не сможете создать не-дочерний блок с неймспейсом `profile`, чтобы не запутаться, но тут нет других вариантов, и выбрать надо меньшее из зол.

С моей колокольни выбор между монстр-компонентом на тысячу строк и тремя-четырьмя поменьше вообще не стоит - однозначно следует выбирать компоненты поменьше, даже если вы оперируете только стилями.
Если пользуетесь фреймворками и в компонентах есть ещё и какая-то логика - то тем более.
Пересечения между такими глобальными категориями вообще не такой частый сценарий, как может показаться, да и названия всегда можно выбрать более узкие.

Я вот здесь отвечал на похожий по смыслу вопрос - посмотрите.
https://qna.habr.com/q/1129178#answer_2136844

Comments

[AlexNew22]

А что значит две --?
class="block__action block__action--edit"
Есть похожий элемент без двух --
Я так понял в нем вы применили то, что описал я, это 2 слова через -
class="block__award-tooltip-close"
А модификаторы тогда что?
Разве block__award это не является элементом, а все, что после - модификаторы

[Максим Морев]

AlexNew22,

что значит две --

это альтернативная схема именования модификаторов "Two..., я нахожу её более удачной, чем классическую.

Я так понял в нем вы применили то, что описал я, это 2 слова через

Нет. У меня в том примере есть элемент `action` с булевым модификатором `edit`.
У вас один элемент `award-tooltip-close` без модификаторов

* Это к вашему вопросу не имеет отношения напрямую. В ответе по ссылке я рассказываю один из вариантов, как можно декомпозировать блоки так, чтобы избежать слишком сильной "внучатости" элементов вроде `block__some-deep-nested-entity-item`, потому что практика показывает, что поддерживать это тяжелее, чем несколько компонентов поменьше