Ошибки именования в вёрстке

~5 минут

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

Смысл
Нотация
Действие/вид/родитель
Количество
Вывод

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

Смысл

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

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

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

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

<section class="section-one">
  <!-- Вёрстка секции -->
</section>

<section class="section-two">
  <!-- Вёрстка секции -->
</section>

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

<section class="section-two">
  <!-- Вёрстка секции -->
</section>

<section class="section-one">
  <!-- Вёрстка секции -->
</section>

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

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

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

Нотация

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

button-blue
button_blue
button--blue

и так далее.

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

<section class="pricing">
  <header class="pricing-header-wrapper">
    <h2 class="pricing--header">Цены на наши услуги</h2>
  </header>
  <div class="pricing__element">
    <div class="pricing--items">
      <!-- Вёрстка карточки -->
    </div>
  </div>
</section>

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

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

<section class="container pricing">
  <h2 class="pricing__header">Цены на продукцию</h2>

  <div class="row">
    <div class="col col-md-3 pricing-items--blue"></div>
    <div class="col col-md-3 pricing-items--red pricing-discount"></div>
    <div class="col col-md-3 pricing-items--blue"></div>
    <div class="col col-md-3 pricing-items--blue"></div>
    <div class="col col-md-3 pricing-items--red pricing-discount"></div>
    <div class="col col-md-3 pricing-items--blue"></div>
  </div>
</section>

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

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

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

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

Действие. Часто классы, указывающие на действие применяются к элементам, с которыми можно взаимодействовать. Для кнопки в форме это может быть класс .btn-send, или класс slider-next для области переключения слайда.

<form action="/">
  <!-- Вёрстка формы -->

  <button class="btn-send">Отправить</button>
</form>

Вид. Такие классы иногда называют «класс-модификатор». Их цель состоит в точечном изменении элемента. Это может быть визуальный вид, состояние или поведение. Такие классы не одиноки, они всегда являются надстройками над классами. Если основной класс .btn, то классами-модификаторами могут быть .btn-green, btn-disable, btn-big.

<form action="/">
  <!-- Вёрстка формы -->

  <button class="btn btn-blue">Отправить</button>
</form>

Родитель. Элементы с такими классами явно описывают то, чьими потомками они являются. Если кнопка лежит в форме с классом order-form, то кнопка может иметь класс order-form__button

<form action="/" class="order-form">
  <!-- Вёрстка формы -->

  <button class="order-form__button">Отправить</button>
</form>

Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» мы познакомим вас с базовыми знаниями и принципами работы с HTML и CSS, расскажем о современных подходах и инструментах вёрстки, включая Flex, Grid, Sass, Bootstrap. Первые курсы в профессии можно пройти бесплатно. Регистрируйтесь и начинайте учиться!

Количество

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

<div class="catalog-item">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

<div class="catalog-item">...
</div>

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

<div class="catalog-items">...
</div>

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

Вывод

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

Nikita Mikhaylov 14 сентября 2020