Локальные CSS-классы
- Опубликовано:
При использовании CSS-классов могут возникать конфликты имён. Наиболее характерно это для классов, имеющих смысл строго в определённом контексте:
- в качестве модификатора в сочетании с базовым классом;
- в качестве ведомого класса в контекстном или дочернем селекторе.
Совпадение имён таких локальных (ведомых) классов с именами глобальных (самостоятельных) классов приводит к каскадному наследованию стилей глобальных классов одноимёнными локальными. Однако на уровне представления локальные классы вовсе не обязательно связаны с одноимёнными глобальными, поэтому такое совпадение может быть нежелательным.
.products {...} /* Каталог продукции */
BODY.home .products {...} /* Блок о продукции на главной странице */
Можно, конечно, последовательно переопределять в локальном классе все стили, унаследованные от одноимённого глобального, или просто всегда придумывать для локальных классов гарантированно уникальные имена, не пересекающиеся с глобальными.
Но можно поступить проще и правильнее: снабжать имена локальных классов префиксом, однозначно указывающим на их локальную принадлежность. Автор этих строк выбрал в качестве такого префикса символ подчёркивания — он достаточно нейтрален, нагляден и прост в использовании.
/* _derived — класс-модификатор */
.base._derived {...}
/* _local — ведомый класс в контекстном селекторе */
.parent ._local {...}
/* _local — ведомый класс в дочернем селекторе */
.parent > ._local {...}
Уместно заметить, что выборка HTML-элементов одновременно по нескольким CSS-классам — одна из многочисленных замечательных возможностей, открывающихся при отказе от поддержки устаревшего браузера IE6.
Вас также может заинтересовать сброс стилей в CSS.