Правила именования, хоть и являются модулем документации MCSS, в обобщенном понятии применимы не только к названиям CSS классов, но так же и совершенно любым другим названиям элементов/файлов/сущностей. Исключая специфику отдельных правил именования, советуется придерживаться общих правил именования в рамках всего проекта.
Абстрактность
Все используемые названия всегда должны быть максимально абстрактными. Нет ничего постоянного, все рано или поздно меняется, обновляется, развивается, а так же мнимо временные варианты часто превращаются в постоянные.
Чтобы название оставалось абстрактным — оно должно быть максимально отделено от представления.
Представление
Названия ни в коем случае не должны включать в себя привязанность к внешним признакам отображения, например:
/* Плохо */
.color-red { color: red } /* цвет ошибки */Цвет ошибки рано или поздно может поменяться, и рано или поздно мы столкнемся с такой ситуацией:
/* Очень плохо */
.color-red { color: green } /* цвет ошибки */С одной стороны проблема не столь велика, но требует дополнительного рефакторинга, который уже как минимум занимает лишнее время и как максимум может вызвать большие сложности и затянуть процесс обновления.
Правила отделения названий от представление покрывает не только привязку к цветам, оно относится практически ко всем свойствам CSS и аналогам в других конктекстах. Все перечисленные ниже названия неприемлемы:
/* Плохо */
.padding-20 {}
.overflow {}Заменять такие название нужно на логическое описание роли элемента. Это может быть сложно, но лучше один раз к этому приучится, и инвестировать немного своего времени, чем потом заморачиваться с поддержкой.
В помощь по выбору названий пригодятся следующие разделы.
Размеры
С абстрактным описанием размеров всегда возникают сложности, чтобы их избежать, рекомендуется использовать правила размеров одежды:
font-size:
10px -> S, .font-S {}
12px -> M, .font-M {}
14px -> L, .font-L {}
Используя такое правило именования можно легко создавать абстрактные название любым сущностям связанным с размерами, и легко их дополнять с помощью промежуточных значений:
XS
XM
XL
XXL и пр.
Cтили
Если название не привязано к размерам и не возможно придумать логичное значение, но тем не менее разные сущности отличаются между собой только внешним представлением, можно использовать название стилей по порядковому номеру, например:
.style-red -> .style-1
.style-big -> .style-2
.style-chaos -> .style-3
Ключевое слово
Правило ключевого слова (keyword) применимо ко всем контекстам где важно наглядно определить логическую связь элементов. Если в файловой системе это правило в большинстве случаев неактуально, и связь элементов определяется вложенностью, то в HTML/CSS может очень пригодится.
В CSS
По MCSS (из основ АНБ), использование каскада в CSS ограничено ради поддержания независимости блоков и связанности с другими их элементами. Поэтому, самое основное правило именования заключаются в необходимости использовать название модуля (оно же ключевое слово) в начале каждого класса этого модуля:
.module-name {}
.module-name_child {}
.module-name_child__modifier {}Чтобы не раздувать названия классов, советуется использовать cловарь сокращений.
Логические части и вложенность названий
Чтобы определить логическую связь между сущностями, в названии используется вложенность названий элементов. Элемент — это вложенная сущность блока.
Название не обязательно должно тянуть всю цепочку вложенности из элементов, цепочки в названиях используются исключительно для определения логической связи элементов, а не для повторения HTML структуры.
Пример в HTML/CSS:
<div class="module-name">
<div class="module-name_child">
<div class="module-name_child_cnt">
<div class="module-name_child_t">
</div>
</div>
</div>.module-name {}
.module-name_child {}
.module-name_child_cnt {} /* child content wrapper */
.module-name_child_t {} /* child title */В примере видно, что класс .module-name_child_t не унаследовал цепочку названия от .module-name_child_cnt, потому, что этот элемент является просто оберткой, которая не несет логики с точки зрения содержания, а используется только для декорации.
Цепочку вложенности названия можно (и нужно) сокращать до тех пор, пока не будет нарушена логическая связь между элементами.
Ограничение вложенности
Словарь сокращений не избавит от длинных названий, есле не ограничивать вложенность. По мотивам BEM подхода в именовании классов, стоит ограничиватся вложенностью в 1-2 элемента, и дробить сущности на мелкие блоки.
Если в какой то ситуации возникла необходимость сделать цепочку длинней 3 элементов, стоит остановиться и задуматься — насколько необходима такая сложность, и может стоит выделить вложенные блоки используемого модуля в отдельный блок.
Рассмотрим на примере предыдущей секции:
.module-name {}
.module-name_child {}
.module-name_child_cnt {} /* child content wrapper */
/* Плохо */
.module-name_child_cnt_txt {} /* child content wrapper text */Чтобы избежать черезмерной вложенности, мы вынесем абстрактный элемент .module-name_child в отдельный блок.
.module-name {}
/* Хорошо */
.module-name-child {}
.module-name-child_cnt {} /* content wrapper */
.module-name-child_txt {} /* text */Таким образом мы убираем прямую связь между блоком .module-name и новым блоком .module-name-child. Они остаются частью одного модуля, но уже в более несвязанном виде .
Обертки
Немного про специфику именование оберток — рекомендуется создавать не обертки блоков, а обертки содержимого блока. Это позволит более наглядно разделять блоки, упростит чтение кода и поспособствует более простому рефакторингу, ибо основная завязка логики чаще будет ложиться на корневой блок, а не на его обертку, которая может в любой момент исчезнуть.
Вместо такого подхода:
/* Плохо */
.block_w - обертка блока
.block
делаем вот так:
/* Хорошо */
.block
.block_cnt - обертка содержимого блока
Разделители
В названиях используются следующие разделители:
"-" - разделитель слов
"_" - разделитель логического части
"__" - разделитель модификатора
Разделитель слов используется вместо пробела в именовании логических частей состоящих из нескольких слов — «длинное-название».
Использование разделителей логических частей описано в разделе про «ключевое слово». Про использование модификаторов чуть больше правил, поэтому раздел про них вынесен в отдельный модуль.
Разделители вполне заменяемы на другие, например в BEM разделитель логичной части “__” а модификатор “_”. Главное придерживаться одного подхода, в котором определены несколько типов разделителей.
comments powered by Disqus