Имена Бэма становятся слишком длинными - лучшая практика - PullRequest
Новая
       33

Имена Бэма становятся слишком длинными - лучшая практика

0 голосов
/ 07 января 2019

У меня есть следующий HTML-код, у меня, как правило, 3-кодовый идентификатор проекта в начале 

<span class="abc-user-overview__header__title"> 
    <span class="abc-user-overview__header__title__name">  
        {{ name }}  
    <span class="abc-user-overview__header__active">true</span>
</span>

Хотя элемент name является дочерним по отношению к заголовку, насколько строгим должно быть соглашение об именах? Как я думаю, abc-user-Overview__header__title__name слишком длинный и предпочел бы отбросить __title, давая мне: 

<span class="abc-user-overview__header__title"> 
     <span class="abc-user-overview__header__name">  
         {{ name }}  
     <span class="abc-user-overview__header__active"true</span>
</span>

Это действительный и приемлемый БЭМ?

1 Ответ

0 голосов
/ 07 января 2019

К сожалению, ваш код недействителен в соответствии с соглашением БЭМ. Это официальное название структуры block-name__elem-name_mod-name_mod-val.

Вот ваш код с действительным именем БЭМ: 

<span class="abc-user-overview__title"> 
    <span class="abc-user-overview__name">{{ name }}</span>
    <span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>

Несколько советов:

  • Старайтесь не называть свои блоки в соответствии с их содержанием. Старайтесь быть универсальными для блоков, которые можно использовать повторно. Например, у нас есть блок, представляющий содержимое списка. На одной из страниц мы можем отображать Новости .news-list, но на других мы можем отображать Продукты, поэтому повторное использование блока с именем .news-list с Продуктами внутри не очень удобно. В этом случае достаточно простого класса, такого как .list.
  • Если что-то можно использовать повторно, сделайте это block, а не element.
  • Для логических модификаторов значение не включено в имя.

Полная документация и отличные примеры можно найти на официальном сайте: https://en.bem.info/methodology/naming-convention/#naming-rules

...