Поддерживаемый CSS (maintainablecss.com) 29 мая 2016
Адам Сильвер описывает свой подход к написанию поддерживаемого CSS. Основные идеи:
- Код надо делить на модули. Модуль — это заголовок, подвал, форма поиска, текст поста. Один модуль может находиться внутри другого, но они не должны зависеть друг от друга.
- Классы должны иметь семантические имена. Не должно быть классов
red
,pull-left
,clearfix
. - Вообще повторно использовать правила для разных модулей плохо. Если в двух блоках должны быть красный текст, нужно не вешать на оба класс
red
, а повторить нужное правило в описании каждого блока. Иначе будут появляться регрессии (изменение классаred
затронет сразу все компоненты, использующие его), проблемы с состояниями (:hover
,:focus
) и другие проблемы. Если несколько разных компонентов всё-таки должны быть одинаковыми, селекторы можно перечислить через запятую. - Не нужно использовать ID для определения стилей. Их можно использовать на формах или в джаваскрипте. В CSS они не приносят пользы и только мешают, потому что правило, определенное по ID, нельзя переопределить правилом для класса.
-
Правила именования классов могут быть любыми, но они должны быть едиными. Здесь предлагают такую структуру:
<moduleName>[-<componentName>][-<state>]
-
Имена классов для состояний и модификаторов должны содержать название модуля или компонента.
Неправильно:
<p class="myModule-title isDisabled">
Правильно:
<p class="myModule-title myModule-title-isDisabled">
Похожий подход описывают и в других местах. В стайлгайде Трелло пишут в целом то же самое, хотя есть и отличия. Например, они всё-таки дают состояниям и модификаторам имена вроде isDisabled
, но при этом запрещают определять правила только для .isDisabled
без указания модуля.