Пытаясь понять БЭМ - PullRequest
Новая
       9

Пытаясь понять БЭМ

0 голосов
/ 10 сентября 2018

Итак, я пытаюсь понять структуру имен БЭМ. Допустим, у меня есть следующий HTML 

<div class="banner">
  <div class="banner__toprow">
    <span class="banner__teamName">
        {{team.name}}
    </span>

    <span class="banner__score">
        {{team.score}}
    </span>
  </div>
  <div class="banner__timeouts">
        {{team.timeOuts}}
    </div>
</div>

Теперь, когда я запутался, когда вы вложили div, как это работает. Например, для banner__teamName я бы обычно делал banner__toprow__teamName. Теперь, может быть, я могу это сделать, но разве это сломает БЭМ?

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Из FAQ БЭМ

Каким будет имя класса для элемента внутри другого элемента? .block__el1__el2?

Согласно методу БЭМ, блочная структура должна быть выровнена; ты сделаешь не нужно отражать вложенную структуру DOM блока. Итак, класс имена для этого случая будут: 

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

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

<div class='block'>
<div class='block__elem1'>
    <div class='block__elem2'>
        <div class='block__elem3'></div>
    </div>
</div>

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

<div class='block'>
<div class='block__elem1'>
    <div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>

0 голосов
/ 10 сентября 2018

Я бы предложил сделать это так: 

<div class="banner">
  <div class="banner__toprow">
    <span class="banner__toprow-teamname">
        {{team.name}}
    </span>

    <span class="banner__score">
        {{team.score}}
    </span>
  </div>
  <div class="banner__timeouts">
        {{team.timeOuts}}
    </div>
</div>

Я не верю, что правильно иметь два Элемента (__) Модификаторов (-). Я также стараюсь не использовать верблюжий кейс в своих классах, это может быть личным предпочтением, но я чувствую, что это может вызвать проблемы с некоторыми фреймворками, такими как Angular.

...