Ошибки именования в вёрстке
2026-02-26 20:23 Diff
https://ru.hexlet.io/blog/posts/oshibki-imenovaniya-v-vyorstke

Именование — сложная задача как для начинающих, так и для опытных разработчиков. Выбор правильного названия элемента — залог читабельной вёрстки, при которой она понятна при одном взгляде на классы. Неважно, что вы используете в работе: БЭМ, OOCSS, SMACSS, или не используете методологий вообще — выбирайте имя с умом.

Что же отличает хорошее именование от плохого? Идеально, если класс раскрывает суть блока. Если это компонент, то он должен быть назван так, чтобы по нему можно было понять, какую структуру он представляет. Если это класс с одним единственным стилем, который не привязан к компоненту, как это делается в Atomic CSS, такой класс должен полностью описывать свойство, которое используется.

Содержание

Смысл

Это одна из самых частых ошибок в именовании. Встретив в HTML класс section-top, можно запутаться:

  • Это первая секция?
  • Это область заголовка внутри секции?
  • Это фиксированная секция?

Без изучения вёрстки и CSS узнать это невозможно.

Другая проблема: указание порядка нахождения секции в классе. Взгляните на пример:

Сейчас всё расположено логично, проблем не будет. Но вот приходит заказчик и просит поменять секции местами. Теперь вёрстка выглядит так:

Такое изменение изменило представление о том, как структурирована вёрстка. Если изменение месторасположения блока ломает логический порядок из-за названий классов, то стоит пересмотреть подход к именованию.

Опишите то, о чём секция, если в этом есть необходимость. Если секция содержит список цен, то класс pricing, pricing_section будет хорошим вариантом. Если стили этих классов совпадают, то имеет смысл создать отдельный класс, например container или section-wrapper.

Также полезно

Совершенный код: ошибки именования в программировании I.

Нотация

Разные подходы к написанию CSS породили разные варианты написания классов. Это могут быть:

  • button-blue
  • button_blue
  • button--blue

и так далее.

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

Найти логику такого построения невозможно. Она понятна только тому, кто эти классы создавал. Возможно, какие-то классы уже заняты в проекте, возможно, некоторые классы писал другой разработчик.

Проблема именования распространена при использовании фреймворков, например, Bootstrap. Используя привычное именование, верстальщик применяет стандартные компоненты фреймворка и не думает о том, чтобы привести именование к единому знаменателю.

Такой подход создаёт проблемы для разработчиков, которые будут поддерживать проект в будущем.

Вспомним, что регистр учитывается при создании классов. Использование единого подхода важно и здесь. Стараясь полностью описать класс, разработчик хочет указать как можно больше слов. В результате встречаются такие классы: .btnInOrderForm. Сам по себе такой подход возможен, хоть и не распространён в вёрстке. При этом важно соблюдать последовательность. Если вы используете верхний регистр, то и другие классы из нескольких слов должны следовать этому подходу.

Действие/вид/родитель

Большинство хороших именований описывают один из этих критериев. Вне зависимости от методологии, вы описываете что-то из этого списка:

  • Действие. Часто классы, указывающие на действие применяются к элементам, с которыми можно взаимодействовать. Для кнопки в форме это может быть класс .btn-send, или класс slider-next для области переключения слайда.
  • Вид. Такие классы иногда называют «класс-модификатор». Их цель состоит в точечном изменении элемента. Это может быть визуальный вид, состояние или поведение. Такие классы не одиноки, они всегда являются надстройками над классами. Если основной класс .btn, то классами-модификаторами могут быть .btn-green, btn-disable, btn-big.
  • Родитель. Элементы с такими классами явно описывают то, чьими потомками они являются. Если кнопка лежит в форме с классом order-form, то кнопка может иметь класс order-form__button

Количество

Этот пункт интуитивно ясный, но редко выполняемый. Если обёртка подразумевает множество одинаковых элементов внутри, то стоит указать это в имени класса с помощью множественного числа.

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

О чём можно подумать, увидев класс .catalog-item? Скорее этот элемент отвечает за конкретную карточку товара, а не за группу товаров. Добавление множественного числа сразу решит эту проблему:

Теперь нет неоднозначности — класс чётко говорит о том, что внутри не один элемент, а группа элементов.

Вывод

  • Определяйте название класса исходя из того, что за элемент перед вами.
  • Не используйте абстрактные имена блоков, такие как .block, .block-1, .block-top и так далее.
  • Используйте один подход к именованию внутри одного проекта.