#b_ BEM CSS методология: Полное руководство

Главное: классы b-someblock__someelement__element__element-modificator - это не BEM! Как правильно верстать по BEM - читайте ниже.

1. Длинное необязательное вступление
2. Суть #b_

• Зачем это всё?
• Блок
• Элемент
• Модификатор
• Префикс b- и его воображаемые друзья: l-,i-,g- и еретический js-
• Как менять внешний вид блока: правила модификации

3. Три главных правила
4. Три главных ошибки, про которые нигде не написано
5. Типичные вопросы, ответов на которые вы не нашли на bem.info
6. Альтернативы или же братья: SMASS, OOCSS, MCSS и BEM.
7. Семантика в BEM.
8. BEM и CSS-препроцессоры: Sass и LESS.
9. Путь Яндекса: кому и зачем нужны bem-tools и прочие "ужасы"
10. bem-bl и bem-bl в сниппетах от Яндекса (скоро!)
11. Альтернативные реализации BEM-методологии
12. Примеры сайтов на BEM

• Яндекс-сайтов по BEM
• НЕ-Яндекс-сайтов по BEM
• Редизайна по BEM

13. Отзывы: Мнения людей меняется за пару месяцев работы с BEM. Путь к пониманию.
14. BEM для атеистов - почему это не религия

История понимания BEM и зачем он нужен. Можно смело пропустить и читать сразу пункт №2.

— Я не понимал BEM ("что за ерунда придуманная программерами, которые не знают CSS"). Нет не программерами. И не ерунда. — Потом я думал что понимал BEM ("у меня типа независимые стили: специфичность длиной в ширину экрана"). — Потом не знал как же правильно его применять, особенно в рамках веб-студии.

Теперь понимаю и знаю. И хочу рассказать и доказать вам что BEM - единственный правильный вариант организации вёрстки.

• Да-да, и для небольших студий, у которых не один большой, а множество средних проектов.
• И для фрилансера с маленькими сайтами.
• И для лендингов.
• И даже когда вы делаете правки в чужом спагетти-коде - вы можете (и должны) примерять BEM!

В BEM прекрасно вписываются SMACSS, OOCSS, MCSS. Большинство не знает что такое BEM, или думает, но знает неправильно. Если вы знаете что такое BEM и считаете что он не для вас (или вообще только Яндексу нужен) - дочитайте до конца. Я расскажу вам о том что BEM - это не "xslt, bem-bl, xml, bem-tools, js", а это методология которая решает проблемы с которыми сталкиваемся мы все. Нужная всем. Незаменимая для компаний, значительно ускоряющая скорость и стоимость разработки, поддержки, развития, передачи проекта другим разработчикам, масштабирования. Это прорыв уровня ООП для CSS.

И более того: BEM - семантичен как ничто другое при правильном применении! Поехали, я расскажу вам о тех идеях и логике, что стоят за BEM, и почему и как вы можете его использовать!

Существует огромное кол-во статей, докладов, презентаций про BEM. Почти все - от Яндекса. Я читал все статьи, все доклады по BEM, ездил на субботники, общался с Харисовым, Ткаченко и разработчиками библиотеки bem-bl. Но чтоб понять всё (а не думать что понял) мне потребовалось 5 лет.

Вообще если бы было меньше бредовых статей типа этой: http://habrahabr.ru/post/203440/ которые пишут те, кто сам ничего не понял, было бы лучше. И ошибок было бы меньше.

Зачем был придуман BEM? Чтоб уйти от каскада.

Идея убрать каскад кажется дикой - как, это же каскад. У нас каскадные таблицы стилей! Каскад сверху до низу по всей странице! Мы в детстве 2000-х играли в игру "кто напишет меньше тегов"!

Но. У нас страница состоит из блоков. Независимых блоков. Ее части не есть один большой текст, со стилями что спускаются вниз. Это блоки, что могут и должны иметь возможность переноситься.

Всё это BEM. Разновидности называются "подмножествами BEM".

НЕ BEM:

• длинные строки каскада ради высокой специфичности селекторов - это не та независимость и ни разу не BEM.
• базовые стили и их переопределения ниже от_контекста - как общий стиль вёрстки
• BEM это не только bemjson, bem-tools и прочее. АНБ - тоже BEM

Чтобы их осознать, мы с вами должны вспомнить как писать правильно. Вспомнить правила. Я говорю "вспомнить", потому что то о чем мы будем говорить - это ручная верстка по BEM. В правильных терминах bem это называется "CSS подмножество BEM". Потому что bem он не только про CSS.

Нам придётся совершить экскурс в историю и пройти путь развития BEM чтобы сформулировать четкие правила "BEM CSS" из общей методилогии. Чтоб собрать все пришлось читать апокрифы. Нет единого стандарта. Есть множество толкований - диалектов BEM. Евангелие от Вегеда, проповедь на внутренней коференции и статьи других апостолов, простите евангелистов BEM. Сам BEM допускает множество вариантов самой методологии. А уж какой путь выбирать в каждом конкретном случае, при модификации кода например - можно спорить и спорить. Поэтому -тот- старый добрый ручной BEM и правду похож на религию.

Сводим всё из разных источников. Очень подробно. Много примеров.

Главное в BEM - понятие независимого блока.

Независимый блок (НБ или просто блок) это самодостаточный элемент страницы, который при перемещении в другое место на странице или на другую страницу не теряет своей самодостаточности. BEM.Клуб на Я.рушке, Независимый блок

Формальное определение

Правила независимости блока:

1. для описания элемента используется class, но не id
2. каждый блок имеет префикс
3. в таблице стилей нет классов вне блоков BEM.Клуб на Я.рушке, История создания BEM (часть первая)

Формальное определение нужно только затем чтоб описать при каких условиях он должен таким стать. Что такое стили вне блоков я опишу ниже.

"Как его таким написать?" Просто писать стили тупо на каждый блок. BEM хорош тем, что позволяет не забивать голову ерундой с каскадом, а сосредоточимся на семантике и логике кода. А с препроцессорами BEM позволяет писать еще и очень чистый и логичный код. Но про это чуть позже.

Как проверить? Просто навести на блок в инспекторе кода. У него не должно быть каскада. Слайд инспектор кода

Не бывает элементов вложенных в элементы!

Я тоже раньше так писал:

.form-buy-results__to-city__slider__tab__column_buy

Так делать нельзя.

Как надо?

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

А в CSS:

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

Если вам нужно сделать элемент у элемента, значит вам нужно сделать новый блок!

<div class='block'>
  <div class='block__elem1'>
    <div class='block2'&gt;&lt;/div&gt;</code>
<code>    &lt;/div&gt;</code>
<code>&lt;/div&gt;</code>

Не пишите странные имена

.block {}
.blockelem1 {}
.blockelem1__elem2 {}

У вас будут проблемы при переносе:

<div class="someblock">
  <div class="blockelem1__elem2"></div>

Бейте на блоки!

• Модификатор
• Префикс b- и его воображаемые друзья: l-,g- и еретический js-
• Как менять внешний вид блока: правила модификации

##8. BEM и CSS-препроцессоры: Sass и LESS. Extend-Only Selectors в Sass == абстрактный блок (i-блок) в #b_

%i-block {
  // стили абстрактного блока
}
.b-block {
  @extend %i-block;
}