EN
Виталя Харисов
Виталя Харисов
30 марта 2009
Read-only

Определение

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

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

Чтобы все блоки на странице были независимыми нужно свести использование глобальных стилей к минимуму, использовать только глобальный сброс стилей (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 и перейдя к использованию исключительно классов, мы облегчаем себе работу (меньше думать о не важном) и повышаем гибкость.

#po4tamo
31 марта 2009
А для обеспечения возможности делать блоки, которые можно вкладывать в такие же блоки, нужно же, по-идее, даже классы, находящиеся внутри блока делать с префиксами. Или вы как-то по-другому это обходите?
#grey-evil
31 марта 2009
Полностью от ID отказаться к сожалению не удасца, например встречаются ситуации когда блок может быть виджетной частью вписанный во враждебное окружение, даже если это враждебное окружение делали опираясь на вёрстку независимыми блоками, и тогда ID единственный вариант повысить вес селектора %(
#serdukovas
1 января 2010
не совсем ещё вник, но сразу в голове возник вопрос про специфичность - у id больше, чем у классов