Как называть css-классы

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 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-like'>
  <!-- Я НЕ заголовок 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. Используйте дефис в качестве префикса при сочетании нескольких состояний

Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.

Пример:

<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 за их отзывы.