Субъективные мысли о БЭМ

Все, сказанное ниже, мои мысли о методе БЭМ, разработанном ребятами из Яндекса.

БЭМ — технология для большого количества больших страниц. Но не используйте её для простых проектов. Воздержитесь от БЭМ если вы фрилансер. Хорошенько разберитесь в сути метода, перед его применением.

Неграмотное использование метода приведёт только лишь к захламлению. Работать с «псевдо БЭМ» документами очень тяжело.

В кратце, суть БЭМ в обращении к элементам только по имени класса и полный отказ от доступа по цепочке элементов.

// правильно
<div class="name-block">
  <div class="name-block-inner">
    <b class="name-block-inner-b"></b>
  </div>
</div>

// неправильно
<div class="name-block">
  <div>
    <b></b>
  </div>
</div>
// правильно
.name-block {}
.name-block-inner {}
.name-block-inner-b {}

// неправильно
.name-block {}
.name-block div {}
.name-block div b {}

Что можно почерпнуть из БЭМ:

  • Именование классов: например, имеем родительский класс с именем form, тогда все имена классов вложенных в него и логически связанных с ним элементов удобно начинать с префикса f_.
  • Отказ от вложенных селекторов в CSS (доступ по имени класса): это делает проект более гибким, позволяя быстро перемещать, компоновать или видоизменять элементы страницы.
  • Модификаторы: позволяют менять внешний вид элементов, подстраивая его под конкретную ситуацию.

Минусы:

  • Захламлённость HTML-файла: имена классов получаются внушительной длины плюс такие же модификаторы. В итоге код превращается в кашу.

Плюсы:

  • Высокая скорость рендеринга страницы.
  • Гибкость клиентской части проекта

Update
В Internet Explorer 6 :hover эффект поддерживается только для ссылок. Например, имея конструкцию вида:

<a href="..." class="b-link__class-name">
    <span class="b-link__class-name-text">Some text</span>
</a>

где к ссылке добавляется фоновое изображение, текст ссылки должен быть подчёркнут, но изображение должно быть вне подчёркивания.
Обработку :hover, в этом случае, следует назначить ссылке:

.b-link__class-name:hover .b-link__class-name-text {
    text-decoration: none;
}

такое противоречит идеологии БЭМ т.к. присутствует вложенность селекторов, а, следовательно, верная запись будет выглядеть так:

.b-link__class-name-text:hover {
    text-decoration: none;
}

Этот вариант, однако, не работает в IE6.