Как называть классы в ЦСС. Часть первая

Как называть классы в ЦСС

Принципы
Инструменты

Как называть классы в ЦСС

Принципы
Инструменты

В ЦСС и ХТМЛ осмысленное и последовательное именование переменных, селекторов и классов значительно упрощает поддержку старого и написание нового кода, и помогает выстроить систему компонентов для их последующего переиспользования.

Селекторы в ЦСС имеют две особенности, которые влияют в том числе на именование.

Глобальная область видимости

Атомы — неделимые смысловые единицы, кирпичики, из которых строится страница. Например: кнопка, ссылка, изображение

В языках программирования у переменных есть области видимости. Селекторы ЦСС можно рассматривать как аналог глобальных переменных в языках программирования. Они доступны на всех страницах и это одновременно плюс и минус, потому что селекторы с общими названиями, вроде .button можно использовать глобально для описания базовых элементов — атомов. Но селекторы элементов, предназначенных только для конкретных компонентов иногда бывает трудно надежно изолировать.

Каскадность

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

Здесь и далее специфичными модулями я называю элементы, которые выполняют какую‑либо конкретную функцию в конкретном месте страницы, в противопоставление атомам. Например: банер, список товаров в корзине, плашка с текстом на полях

Эти особенности заставляют разработчика решать задачи изоляции специфичных модулей страницы и расширяемости атомов для их максимального переиспользования в будущем.

Помимо того, что плохие названия селекторов мешают решению этих задач, они могут и просто запутывать, потому что не несут полезной информации, противоречат друг другу, или, например, описывают содержимое элемента, а не особенности его отображения.

Примеры неудачного именования:

Селектор	Проблемы
`.text` (у абзаца), `.link` (у ссылки)	Слишком общие названия для базовых элементов в большинстве случаев не имеют смысла и можно обойтись без них путём стилизации базовых элементов напрямую. Если элемент специфичный, то и класс у него должен быть специфичный только для него.
`.text1` (у абзаца)	Непонятно, что значит text1. Первый абзац? «Первый» размер кегля? Единственный экземпляр этого текста? Если это стиль для первого абзаца в тексте, селектор выбран неверно — специфичный класс для базового элемента (абзаца). Лучше использовать класс‑модификатор, который изменяет свойства базового элемента — `p.first`.
`.our-favourite` (у абзаца)	Класс описывает смысл содержимого базового элемента. Переиспользовать такой селектор в этом случае очень трудно. Выход — снова класс‑модификатор, изменяющий свойства базового элемента — `.uppercased`. Если же стиль абзаца нужен только внутри какого‑то модуля, то лучше описать его как базовый элемент этого модуля. Как‑нибудь так: `.our-favourite-banner p`.
`.sjf-1-xl`	В названии явно что‑то закодировано. Но понять это сможет только автор кода (если хорошая память). Так лучше не делать, если только вы не строите ЦСС‑фреймворк, вроде Бутстрапа.
`.big_button` (у кнопки)	Описывается кнопка большого размера. Сущность здесь кнопка, а её размер — модификатор. Лучше разделить и описать их по‑отдельности, как `.button` и `.button.big`. В `.button` описать общие правила для всех кнопок, а в `.button.big` — особенности именно большой кнопки. Если появится ещё один размер кнопок, его будет проще добавить.

В следующем совете разберём методологии и инструменты, помогающие снять или существенно облегчить вопросы именования селекторов.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.