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

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

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

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

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

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

В языках программирования у переменных есть области видимости. Селекторы ЦСС можно рассматривать как аналог глобальных переменных в языках программирования. Они доступны на всех страницах и это одновременно плюс и минус, потому что селекторы с общими названиями, вроде .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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы