EN
Виталя Харисов
Виталя Харисов
2 апреля 2009
Read-only

Стили блока могут влиять на вложенные в него блоки. Чтобы этого не происходило нужно сделать блок «неискажающим» (раньше мы его называли «абсолютно-независимый блок»).

Для этого надо выполнить два простых правила:

  1. Всем элементам внутри блока надо задать классы, т.е. не опираться в CSS на имена элементов
  2. Все классы, на которые накладываются стили этого блока, должны быть уникальными, например, начинаться с имени класса корневого элемента

Рассмотрим на примере:

<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>

Экономим байты, теряем в наглядности, потенциально теряем в уникальности. Ещё варианты?

#veged
2 апреля 2009
два дефиса это гемор с каментами
#basvasilich
3 апреля 2009
Не понимаю почему b-services--list не выделить в отдельный более атомарный блок. b-тратата-list который может быть общим с другим блоком. Другими словами не понимаю зачем внутренние классы, а не блоки (описывающие поведение списков, на поведение которых влияет блок родитель) например на списках. Больше блоков - больше гибкость, не?
#loukianov
6 апреля 2009
В принципе, спецификация в идентификаторах позволяет использовать кроме [a-z0-9_-] еще и все символы U+00A1+, так что можно было бы использовать, например, ∋ (∋, contains as member, или любой другой подходящий символ) как разделитель - но IE5.* таких селекторов не понимает. Ну и правила вроде .b-logo\220B sub {...) читаются плохо - разве что запомнить мнемонику "двестидвадцатьвольт" :-).
#petrouv
11 мая 2009
b-logo-_-pic ?
#glader
7 ноября 2009
Привет. А есть где-нибудь одна страница со всем принципами верстки? Чтобы включать в ТЗ на верстку.
#creocoder
19 февраля 2010
Извините, но это полный кошмар. Отказываться от наследования в CSS в угоду скорости рендеринга это бред.
#vitaly
19 февраля 2010
Мир он такой, не совершенный.
#art-dambis
19 февраля 2010
Я немного не понял. То, что на внутренние блоки не накладываются стили делает всего лишь добавление класса (пусть даже его описания в ЦСС не будет) или все же имеется в виду, что добавляем внутри классы, а потом для них стили еще прописываем, где перегружаем от верхнего блока заданные?
#vitaly
20 февраля 2010
Я не понял вопроса.
#creocoder
20 февраля 2010
Текущая скорость отрисовки в браузерах не устраивает? Оптимизация, где на кону 10мс vs 5мс(грубо) совершенно не понятна. Браузеры будут расти дальше и алгоритмы оптимизируют, а ваша техника будет служить ярким примером того, как не нужно делать никогда. Чему вы людей учите, Виталий? Это шаг на 10 лет назад. Так можно было делать всегда, но так никогда не делали, не потому что не знали или не умели, а потому что это равносильно отказу от циклов и прочих вещей, если говорить в терминах классического программирования. Ничего более страшного в жизни я ещё не видел. Честно скажу, не ожидал.
#veged
20 февраля 2010
"Оптимизация, где на кону 10мс vs 5мс" это в относительных величинах в 2 раза! кроме того, в абсолютных, речь идёт о бОльших величинах, на некоторых примерах их можно вполне уловить глазом (без "приборов") зря вы думаете что так никогда не делали если говорить в аналогиях "классического программирования", то конечный css/html, работающий в браузере, это "машинный код", компилируемый из программы на языке более высокого уровня, а не пишущийся руками
#art-dambis
20 февраля 2010
Из Вашего поста получается, что
, то только лишь добавление class="b" (без описания стилей этого класаа) делает так, что во внутреннем блоке ничего не наследуется.
#vitaly
20 февраля 2010
Что именно вы понимаете под наследованием в CSS? Приведите пример, где было хорошо, а стало очень плохо после внедрения АНБ.
#vitaly
20 февраля 2010
Текущая скорость отрисовки в браузерах не устраивает? Оптимизация, где на кону 10мс vs 5мс(грубо) совершенно не понятна.
Не устраивает. Страница списка писем в почте рисовалась 2 секунды в MSIE6. После перехода на АНБ и отказа от спрайтов/фонов стало 200 ms. Разница в 10 раз.
#vitaly
20 февраля 2010
Чему вы людей учите, Виталий? Это шаг на 10 лет назад. Так можно было делать всегда, но так никогда не делали, не потому что не знали или не умели, а потому что это равносильно отказу от циклов и прочих вещей, если говорить в терминах классического программирования. Ничего более страшного в жизни я ещё не видел. Честно скажу, не ожидал.
Я не понял всех этих эмоций. О чём речь, собственно? Что именно вам не нравится? Приведите примеры.
#vitaly
20 февраля 2010
В селекторах с классом "a" не используются элементы, соответственно на вложенные элементы с классом "b" не накладываются стили от "a". Всё что наследуюется само, конечно, на "b" накладывается, например, color.
#altspam
27 февраля 2010
Есть блоки, которые допускают вложения, но в 9 случаях из 10 используются атомарно. Из-за этого одного случая (который, кстати, может быть и в другом проекте) придется постоянно таскать за собой балласт из классов, что довольно утомительно. Например, блок .b-services из вашего примера, став неискажающим, потяжелел на три четверти (166 Б → 291 Б).

Предлагаю сразу прописывать стили элементов блока для искажающего и неискажающего вариантов. Как их различать?
   — с помощью префикса (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 { … }

С этими стилями можно использовать как простой, так и составной вариант блока, изменяя только регистр первой буквы.
#altspam
27 февраля 2010
Поправка:

.b-services,
.b-Services { … }
#vitaly
27 февраля 2010
Мы отказались от использования имён элементов в селекторах из-за того, что такие селекторы тормозят. Теперь всем DOM-элементам мы прописываем классы и работаем только с классами. Это позволяет нам, в т.ч. минимизировать классы. Синтаксис описания блоков/элементов/модификаторов уже устоялся, мы ничего менять не будем.
#o-mokhov
6 марта 2010
А почему нельзя вместо bs__list писать bs__ul? Второе вроде как даже более привычно? Ну и два байта всё ж таки
#vitaly
6 марта 2010
Мы не используем нотацию bs. Используем полную, она однозначная, в отличие от сокращений. list более семантично, чем ul. Список может и не через ul делаться, если называть list не надо будет менять при изменении реализации. Байты считать не надо, классы надо обфусцировать до 1-2-3 байт.
#quarta-dimensio
21 мая 2011