Стили блока могут влиять на вложенные в него блоки. Чтобы этого не происходило нужно сделать блок «неискажающим» (раньше мы его называли «абсолютно-независимый блок»).
Для этого надо выполнить два простых правила:
- Всем элементам внутри блока надо задать классы, т.е. не опираться в CSS на имена элементов
- Все классы, на которые накладываются стили этого блока, должны быть уникальными, например, начинаться с имени класса корневого элемента
Рассмотрим на примере:
<div class="b-services">
<h2>Сервисы</h2>
<ul>
<li><a href="">Крибли</a></li>
<li><a href="">Крабли</a></li>
<li><a href="">Бумс</a></li>
</ul>
</div>
Чтобы стили блока b-services никак не влияли на вложенные блоки, задаём всем элементам блока, на которые мы накладываем стили, уникальные имена классов начинающиеся с имени блока (b-services).
<div class="b-services">
<h2 class="b-services__head">Сервисы</h2>
<ul class="b-services__list">
<li class="b-services__item"><a href="">Крибли</a></li>
<li class="b-services__item"><a href="">Крабли</a></li>
<li class="b-services__item"><a href="">Бумс</a></li>
</ul>
</div>
__ используется для отделения имени блока от внутреннего класса. Если писать с одним дефисом (b-services-head), то непонятно это имя другого блока, или внутренний класc. Просто подчёркивание используется для отделения модификаторов от имени блока. Других символов, кроме - и _, по спецификации CSS использовать нельзя.
В качестве альтернативы префиксу из имени блока, можно использовать префикс из первых букв имени блока. В примере выше это будет bs__
<div class="b-services">
<h2 class="bs__head">Сервисы</h2>
<ul class="bs__list">
<li class="bs__item"><a href="">Крибли</a></li>
<li class="bs__item"><a href="">Крабли</a></li>
<li class="bs__item"><a href="">Бумс</a></li>
</ul>
</div>
Экономим байты, теряем в наглядности, потенциально теряем в уникальности. Ещё варианты?
Предлагаю сразу прописывать стили элементов блока для искажающего и неискажающего вариантов. Как их различать?
— с помощью префикса (u-);
— с помощью модификатора (-u);
— с помощью регистра.
Мне больше нравится последний вариант, потому что не плодятся префиксы и модификаторы, и один и тот же блок выглядит и называется одинаково независимо от того, есть что-то внутри него или нет. А регистр в именах классов не различают только почившие с миром IE 5.5 и Netscape 6.
Пример:
.b-services { … }
.b-services h2,
.b-Services .b-services__head { … }
.b-services ul,
.b-Services .b-services__list { … }
.b-services li,
.b-Services .b-services__item { … }
С этими стилями можно использовать как простой, так и составной вариант блока, изменяя только регистр первой буквы.
.b-services,
.b-Services { … }