[Перевод] Как называть css-классы
Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.
0. Прежде чем думать о названии класса, выберете подходящее название для HTML-элементов
Если это поле, используйте элемент input
Читать HTML-документ будет гораздо легче.
Пример:
Источник: Рафаэль Гоитер (французская статья)
1. Назначайте классы как можно ниже по DOM-дереву
Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.
Пример:
Lorem ipsum
main.mainly p { /* Не делайте этого */
}
/* Вместо этого присвойте название класса p : */
.paragraphly {
}
Источник: Крис Койер
2. Называйте классы по содержимому
Пример:
.c-header-logo {
/* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */
}
Источник: phpied.com
3. Не называйте класс по содержимому, если картинка нагляднее
Скажем, лого шапки на самом деле выглядит так: 
Тогда не называйте его header-logo.
.guillotine {
/* О, сразу видно, что мы хотим стилизовать */
}
4. Попробуйте суффикс -like для лучшей переносимости кода.
Пример:
h3, .h3-like {
/* какое-то оформление */
}
Источник: KNACSS v4
5. Не используйте верблюжийРегистр
Это затрудняет чтение
Пример:
.navToOneModuleICreated {
font-size:2em;
}
/* против */
.nav-to-one-module-i-created {
font-size:2em;
}
Источник: Гарри Робертс
6. Пробуйте БЭМ
На сегодняшний день это одно из самых популярных соглашений.
- Поначалу он кажется странным, но не бойтесь.
- Порог вхождения очень низкий
- Можно использовать его уже сейчас в любой части проекта.
- Долгосрочные перспективы колоссальны
(двойной дефис) означает вариант элемента.
(двойное подчёркивание) означает дочерний элемент.
Пример:
.btn--warning {
/* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */
}
.btn__text {
/* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */
}
Источник: Калиг, пятьдесят оттенков БЭМ
Рекомендовано: Smashing Magazine, боремся с БЭМ
7. Пробуйте ещё страшнее
БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.
Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.
Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.
Пример:
.DIMENSIONS_OF_mycomponent {
/* Куда ещё противнее. Зато теперь понятнее, о чём речь. */
/* Я использую его для классов-заготовок в SASS. */
/* Но всё же не злоупотребляйте этим правилом. */
}
8. Не сокращайте описывающие слова
Помимо уже устоявшихся nav, txt, url… следует избегать любых аббревиатур.
Источник: phpied.com
9. Пробуйте использовать только одну букву в качестве осмысленного префикса
В случае визуального компонента начинайте с c-, а в случае объекта (напр. макет) — с o-, мне просто нравится этот трюк Гарри Робертса.
Пример:
Источник: исходный код «Inuit Kitchen Sink»
11. Используйте префикс js-, если он используется только для JavaScript
Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js-.
Пример:
Источник: Дерик Бейли, книга по marionnette.js
12. Старайтесь отделить родительский элемент от дочернего
Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.
Пример:
(плохо)
(хорошо)
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 для указания состояния компонента
Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.
Пример:
Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.
18. Используйте префиксы has- или is- для состояния
Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.
Пример:
.activated {
/* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */
}
.is-activated {
/* Да, вы оформляете состояние. */
}
Источник: оформление кода в Mobify
19. Используйте дефис в качестве префикса при сочетании нескольких состояний
Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.
Пример:
Источник: Бен Смифет
20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных
Это упрощает чтение документа.
Пример:
Источник: я узнал это, когда работал с командой Predicsis
21. Не следуйте правилам
Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.
Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:
1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3), но избегайте переусложнения.
Если правило вам не подходит, просто пропустите его
Наслаждайтесь!
Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.
