БЭМ и независимые блоки

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

Терминология

Блок — некоторая самостоятельная сущность, может быть простым или составным (то есть содержать в себе другие блоки).

Элемент — это составная часть блока, отвечающая за отдельную функцию, элемент может находиться только в составе блока.

Модификатор — это свойство блока или элемента, которое меняет их внешний вид или поведение.

Принципы БЭМ

Независимость блоков. Независимый блок реализован так, что его можно вставить в любое место на странице: то есть блоки в рамках БЭМ свободно перемещаемы и могут вкладываться друг в друга. В CSS для этого используются уникальные селекторы (классы) для именования блоков и элементов, не используются правила на основе названий тегов и минимизированы каскады. В плане JS это означает использование в качестве селекторов классов без каскадирования.

Повторяемость блоков. Методология БЭМ основана на том, что любой блок может встречаться на странице более одного раза. Это означает, что для стилевого оформления и для скриптов всегда используются классы, а не названия тегов и не идентификаторы.

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

Предметная абстракция. При командной разработке должна использоваться единая терминология, это касается правил именования блоков, элементов и модификаторов.

Консистентность блока. Каждый блок должен знать всё о себе: разметка, стилевое оформление, поведение и используемые блоком ресурсы (изображения, например) должны быть собраны вместе, чтобы модификация блока была простой и удобной для разработчиков.