в чем разница между block__element__element и block__element-element в БЭМ - PullRequest
Новая
       10

в чем разница между block__element__element и block__element-element в БЭМ

0 голосов
/ 26 апреля 2018

Например: 

<div class="menu">
    <div class="menu__item">
        <div class="menu__item-title">
        </div>
    </div>
</div>

Есть какое-то решение, например menu__title.

Но если меню имеет собственный заголовок, то как распознать заголовок меню и заголовок пункта меню?

1 Ответ

0 голосов
/ 26 апреля 2018

Основное отличие состоит в том, что block__element__element не является допустимым селектором БЭМ. Разметка, которую вы указали в своем вопросе, является ПРАВИЛЬНЫМ способом именования ваших элементов.

Создать блок

Если часть кода может быть повторно использована и не зависит от других внедряемые компоненты страницы.

Создать элемент

Если часть кода не может использоваться отдельно без родителя сущность (блок).

Исключением являются элементы, которые должны быть разделены на более мелкие части - подэлементы - для упрощения разработки. В БЭМ Методология, вы не можете создавать элементы элементов. В случае как это, вместо создания элемента, вам нужно создать сервис блок.

Больше информации в официальной документации: https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element

Если вы хотите иметь заголовок меню, разметка должна выглядеть примерно так: 

<div class="menu">
    <h2 class="menu__title">..</h2>
    <div class="menu__item">
        <div class="menu__item-title">
        </div>
    </div>
</div>

БЭМ становится немного сложнее, когда у вас есть «дети» элемента. Но либо используйте menu__item-title соглашение об именах, либо переосмыслите свой элемент, возможно, его можно отделить и использовать повторно как Block ?

...