БЭМ и именование заголовков

[binomer]

Почитал про БЭМ в очередной раз. И задумался над одной вещью. Пусть у нас есть несколько блоков на странице. У каждого блока есть заголовок. Заголовки одинаковые. То есть их можно описать одними и теми же CSS-правилами.

 

С одной стороны, логично заголовки обозначать как элементы блока. А с другой, так как они одинаковые, можно выделить в отдельный блок. Кто что думает по этому вопросу?

[npofopr]

Отдельный блок. И БЭМ тут вовсе не причем.

[binomer]

Отдельный блок. И БЭМ тут вовсе не причем.

Да это-то да. Я просто задумался об этом, когда читал о нем.

[rash]

Если очень хочется, можно и совместить.

<div class="block">    <h2 class="header block__header">Заголовок блока</h2>    <div class="block__content">        Содержимое блока    </div></div>

Если это нужно в вашем случае.

[Быколай]

Имхо, тут удобно ввести глобальный префикс для таких классов, чтобы отличать классы блоков от общих.

/* global.css */.g-header{   font-family: Arial, sans-serif;}/* и например модификаторы для уровня */.g-headel--level_1 {   font-size: 24pt;}.g-headel--level_2 {   font-size: 18pt;}

Но с таким подходом страдает полная автономность блока: появляется зависимость от кода не принадлежащего блоку. А это ведь killer-feature BEM.

Edited April 20, 2014 by Быколай

[rash]

По БЭМ не должно быть классов вне блоков. Поэтому повторяющийся заголовок оформляем отдельным блоком, если внутри какого-то другого блока он несколько отличается — подмешиваем к нему элемент блока. Ну или можно подмешать и заранее, «на всякий случай», ничего плохого не случится.

[Быколай]

rash, т.е. один html-элемент будет одновременно являться определённым блоком и элементом другого блока? 

[Bassline]

Я обычно делаю отдельный блок и вешаю на него модификатор:

<div class="block">    <h2 class="header header_block">Заголовок блока</h2>    <div class="block__content">        Содержимое блока    </div></div><div class="block2">    <h2 class="header header_block2">Заголовок блока</h2>    <div class="block2__content">        Содержимое блока    </div></div>и т.д.

[rash]

rash, т.е. один html-элемент будет одновременно являться определённым блоком и элементом другого блока? 

Да, это вполне допустимо и ничему не противоречит.

 

Я обычно делаю отдельный блок и вешаю на него модификатор:

 

Мне кажется это немного другой случай. Модификатор стоит использовать, когда есть несколько немного отличающихся разновидностей блоков, но они могут использоваться самостоятельно.

 

Подмешиваем элемент блока в том случае, когда изменения нужно сделать в контексте блока-родителя. То есть в общем случае тогда, когда без БЭМ мы бы использовали контекст ".block .header". По БЭМ-у мы доопределяем стили уже у элемента блока .block__header. Я например часто использую такой прием, когда нужно спозиционировать блок внутри блока-родителя, тогда я уже позиционирую его как элемент родительского блока. Ну или размеры задать, или как-то иначе адаптировать отображение всего блока внутри конкретного родителя.