Определение

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

Глобальные стили

Чтобы все блоки на странице были независимыми нужно свести использование глобальных стилей к минимуму, использовать только глобальный сброс стилей (global reset).

Вводим префиксы

Для разграничения блоков от вложенных в них элементов, вводим для классов блоков префикс (b-, l-, etc), а классам вложенных элементов префикс не задаём.

Например,

<div class="b-logo">
    <img src="..." alt="Рога и Копыта"/>
 
    <i class="shadow"></i>
</div>

В этом примере блок b-logo является самодостаточным (это логотип компании), а shadow не имеет никакого смысла вне этого блока (тень привязана к предмету от которого она падает и без предмета не имеет смысла).

Классы вне блоков не используем

Классы вне блоков не используем, в таблице стилей не должно быть селекторов начинающихся не с префикса (исключения составляют #js и .quirks, об этом позже).

Не используем id

При описании блока id не используется, только class. Главная Причина для отказа от id состоит в том, что мы будем активно использовать множественные классы у одного элемента (например, class="b-logo b-logo_index").

Ещё одна Главная Причина в том, что не надо думать будет этот элемент встречаться на странице один раз (следовательно задавать ему id), или много (а это class). Отказавшись от использования id и перейдя к использованию исключительно классов, мы облегчаем себе работу (меньше думать о не важном) и повышаем гибкость.