Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.
0. Прежде чем думать о названии класса, выберете подходящее название для HTML-элементов
Если это поле, используйте элемент input
Читать HTML-документ будет гораздо легче.
Пример:
<div class='submit'/> <!-- Чёёё? -->
<input class='submit'/> <!-- Аа, ясно -->
Источник: Рафаэль Гоитер (французская статья)
1. Назначайте классы как можно ниже по DOM-дереву
Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.
Пример:
<main class='mainly'>
<p>Lorem ipsum</p> <!-- Я хотел бы застилизовать этот абзац -->
</main>
main.mainly p { /* Не делайте этого */
}
/* Вместо этого присвойте название класса p : <p class='paragraphly' /> */
.paragraphly {
}
Источник: Крис Койер
2. Называйте классы по содержимому
Пример:
.c-header-logo {
/* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */
}
Источник: phpied.com
3. Не называйте класс по содержимому, если картинка нагляднее
Скажем, лого шапки на самом деле выглядит так:
Тогда не называйте его header-logo.
.guillotine {
/* О, сразу видно, что мы хотим стилизовать */
}
4. Попробуйте суффикс -like для лучшей переносимости кода.
Пример:
h3, .h3-like {
/* какое-то оформление */
}
<p class='h3-title'>
<!-- Я НЕ заголовок h3, но поскольку дизайнер велел мне выглядеть так же,
я не могу жаловаться на своё название класса -->
</p>
Источник: KNACSS v4
5. Не используйте верблюжийРегистр
Это затрудняет чтение
Пример:
.navToOneModuleICreated {
font-size:2em;
}
/* против */
.nav-to-one-module-i-created {
font-size:2em;
}
Источник: Гарри Робертс
6. Пробуйте БЭМ
На сегодняшний день это одно из самых популярных соглашений.
- Поначалу он кажется странным, но не бойтесь.
- Порог вхождения очень низкий
- Можно использовать его уже сейчас в любой части проекта.
- Долгосрочные перспективы колоссальны
(двойной дефис) означает вариант элемента.
(двойное подчёркивание) означает дочерний элемент.
Пример:
<button class='btn btn--warning'> <!-- oдин из вариантов .btn — .btn--warning -->
<div class="btn__text"></div> <!-- один из дочерних элементов .btn — .btn__text-->
</button>
.btn--warning {
/* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */
}
.btn__text {
/* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */
}
Источник: Калиг, пятьдесят оттенков БЭМ
Рекомендовано: Smashing Magazine, боремся с БЭМ
7. Пробуйте ещё страшнее
БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.
Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.
Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.
Пример:
.DIMENSIONS_OF_mycomponent {
/* Куда ещё противнее. Зато теперь понятнее, о чём речь. */
/* Я использую его для классов-заготовок в SASS. */
/* Но всё же не злоупотребляйте этим правилом. */
}
8. Не сокращайте описывающие слова
Помимо уже устоявшихся nav, txt, url… следует избегать любых аббревиатур.
Источник: phpied.com
9. Пробуйте использовать только одну букву в качестве осмысленного префикса
В случае визуального компонента начинайте с c-, а в случае объекта (напр. макет) — с o-, мне просто нравится этот трюк Гарри Робертса.
Пример:
<button class='o-layout'>
<div class='o-layout-item o-grid c-button'></div>
<!-- С первого взгляда на HTML видно, что за что отвечает.->
</button>
Источник: Гарри Робертс
10. Пробуйте [], когда слишком много классов одного типа
Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .], они нужны только здесь, чтобы помочь другим читать HTML.
Пример:
<button class='[ o-layout ]'>
<div class='[ o-layout-item o-layout-item--first ] c-button'></div>
<!-- С первого взгляда на HTML видно, что за что отвечает.-->
</button>
Источник: исходный код «Inuit Kitchen Sink»
11. Используйте префикс js-, если он используется только для JavaScript
Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js-.
Пример:
<button class='js-click-me'>
<!-- При беглом просмотре HTML я понимаю, что у этой кнопки нет CSS-селектора для оформления.
Но JavaScript использует её, видимо, чтобы поймать какое-то событие. -->
</button>
Источник: Дерик Бейли, книга по marionnette.js
12. Старайтесь отделить родительский элемент от дочернего
Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.
Пример:
(плохо)
<button class='a'>
<!-- Этот класс ниже включает сочетание свойств,
некоторые из которых участвуют в отношении a-b,
а некоторые — в отношении b-c,
CSS-файл будет трудно читать.-->
<div class='child-of-a-and-parent-of-c'>
<div class='c'>
</div>
</div>
</button>
(хорошо)
<button class='a'>
<!-- Разделите на 2 класса-->
<div class='child-of-a parent-of-c'>
<div class='c'>
</div>
</div>
</button>
13. Несемантические классы должны явно описывать свои свойства.
Большинство из них содержат только одно свойство, и незачем его скрывать.
.horizontal-alignment { /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */
text-align: center;
}
/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */
.u-text-align--center {
text-align: center;
}
14. Явные хаки (I)
Если вы не довольны вашем CSS-селектором, скажите это всем.
Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.
Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.
Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.
Пример:
.my-component {
margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */
}
15. Явные хаки (II)
Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css
Опять же, Гарри Робертс подсказал
Источник: Гарри Робертс
16. Старайтесь избегать более двух слов для одного имени
Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.
Пример:
.button {
/* Хорошо */
}
.dropdown-button {
/* Всё ещё хорошо */
}
.dropdown-button-part-one {
/* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */
}
.dropdown-button-part-one__button-admin {
/* Ой, всё!!! */
}
17. Используйте атрибут data-state для указания состояния компонента
Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.
Пример:
<button class='c-button c-button--warning is-active'>
<!-- Не делайте этого -->
</button>
<button class='c-button c-button--warning' data-state='is-active'>
<!-- Так-то лучше.
Я удалил объявление класа,
это гарантирует единственность состояния,
и для тех, кто использует Sass, это сделает код чище.-->
</button>
Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.
18. Используйте префиксы has- или is- для состояния
Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.
Пример:
.activated {
/* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */
}
.is-activated {
/* Да, вы оформляете состояние. */
}
Источник: оформление кода в Mobify
19. Используйте дефис в качестве префикса при сочетании нескольких состояний
Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.
Пример:
.activated {
<button class="btn -color-red -size-large -shape-round"></button>
Источник: Бен Смифет
20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных
Это упрощает чтение документа.
Пример:
<button class="c-button">
<!-- ПЛОХОЙ ПРИМЕР: в нём используются " вместо '. В этом крошечном примере это не играет особой роли, но когда дело касается сотни селекторов в HTML-файле, одиночные кавычки — лучшая идея. -->
</button>
<button class='c-button'>
<!-- Хорошо!-->
</button>
Источник: я узнал это, когда работал с командой Predicsis
21. Не следуйте правилам
Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.
Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:
1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.
Если правило вам не подходит, просто пропустите его
Наслаждайтесь!
Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.
Автор: psywalker
