Локальные CSS-классы

При использовании CSS-классов могут возникать конфликты имён. Наиболее характерно это для классов, имеющих смысл строго в определённом контексте:

  • в качестве модификатора в сочетании с базовым классом;
  • в качестве ведомого класса в контекстном или дочернем селекторе.

Совпадение имён таких локальных (ведомых) классов с именами глобальных (самостоятельных) классов приводит к каскадному наследованию стилей глобальных классов одноимёнными локальными. Однако на уровне представления локальные классы вовсе не обязательно связаны с одноимёнными глобальными, поэтому такое совпадение может быть нежелательным.

.products {...} /* Каталог продукции */
BODY.home .products {...} /* Блок о продукции на главной странице */

Можно, конечно, последовательно переопределять в локальном классе все стили, унаследованные от одноимённого глобального, или просто всегда придумывать для локальных классов гарантированно уникальные имена, не пересекающиеся с глобальными.

Но можно поступить проще и правильнее: снабжать имена локальных классов префиксом, однозначно указывающим на их локальную принадлежность. Автор этих строк выбрал в качестве такого префикса символ подчёркивания — он достаточно нейтрален, нагляден и прост в использовании.

/* _derived — класс-модификатор */
.base._derived {...}

/* _local — ведомый класс в контекстном селекторе */
.parent ._local {...}

/* _local — ведомый класс в дочернем селекторе */
.parent > ._local {...}

Уместно заметить, что выборка HTML-элементов одновременно по нескольким CSS-классам — одна из многочисленных замечательных возможностей, открывающихся при отказе от поддержки устаревшего браузера IE6.


Вас также может заинтересовать сброс стилей в CSS.