Именование классов в HTML (шпаргалка)

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

---

1. Основные правила

1. Нижний регистр и kebab-case
   Разделяй слова дефисом.

   <!-- ❌ Плохо -->
   <div class="userinfo">...</div>
   <div class="userInfo">...</div>
   
   <!-- ✅ Хорошо -->
   <div class="user-info">...</div>

2. Не используй цифры и сокращения
   Код читают чаще, чем пишут. Лучше button, чем btn, и link, чем lnk.

   <!-- ❌ Плохо -->
   <div class="element-1">...</div>
   <button class="btn">...</button>
   
   <!-- ✅ Хорошо -->
   <div class="first-element">...</div>
   <button class="button">...</button>

3. Имя должно отражать суть, а не внешний вид
   Не называй классы по цвету или положению. Называй по функции.

   <!-- ❌ Плохо -->
   <button class="red-button">...</button>
   <div class="left-block">...</div>
   
   <!-- ✅ Хорошо -->
   <button class="button danger">...</button>
   <div class="sidebar">...</div>

4. Комбинируй классы для переиспользования
   Один элемент может иметь несколько классов: общий + модификатор.

   <button class="button wide">...</button>
   <section class="section large-padding">...</section>

5. Не плоди уникальные классы для одинаковых блоков
   Если несколько секций имеют одинаковые стили — используй один общий класс.

   <!-- ❌ Плохо -->
   <section class="banner">...</section>
   <section class="features">...</section>
   <!-- оба имеют одинаковые padding, но разные классы -->
   
   <!-- ✅ Хорошо -->
   <section class="section">...</section>
   <section class="section">...</section>

---

2. Часто используемые имена по категориям

Структурные блоки (семантические)

Класс	Тег	Когда использовать
.page	<html> или <body>	Корневой элемент страницы
.header	<header>	Шапка сайта или секции
.main, .content	<main>	Основное содержимое
.footer	<footer>	Подвал
.section	<section>	Логический раздел
.sidebar, .aside	<aside>	Боковая колонка
.nav, .menu	<nav>	Навигация

Структурные блоки (нейтральные)

Класс	Тег	Когда использовать
.wrapper, .wrap	<div>	Обёртка для группировки
.container	<div>	Ограничитель ширины контента
.grid	<div>	Контейнер для сетки
.row	<div>	Строка сетки
.col, .column	<div>	Ячейка / колонка сетки

Списки

Класс	Тег	Когда использовать
.list, .items	<ul>, <ol>	Список
.item	<li>	Элемент списка

Карточки

Класс	Тег	Когда использовать
.card	<article>, <div>	Карточка товара, поста, профиля

Изображения

Класс	Тег	Когда использовать
.image, .img	<img>	Изображение
.avatar	<img>	Аватар пользователя
.logo	<img>	Логотип компании
.icon	<img>, <svg>	Иконка

Текст

Класс	Тег	Когда использовать
.title, .heading	<h1>–<h6>	Заголовок
.subtitle	<h2>–<h6>	Подзаголовок
.description	<p>	Описание
.text	<p>	Основной текст
.link	<a>	Ссылка
.label	<span>	Метка, ярлык
.copyright	<p>	Копирайт

Формы

Класс	Тег	Когда использовать
.form	<form>	Форма
.field	<div>	Обёртка поля ввода
.field-label	<label>	Подпись к полю
.field-control	<input>, <textarea>, <select>	Поле ввода

Чекбоксы и радио

Класс	Тег	Когда использовать
.checkbox	<label>	Корневой элемент чекбокса
.checkbox-control	<input type="checkbox">	Сам чекбокс
.checkbox-label	<span>	Текст чекбокса
.radios	<fieldset>	Группа радио-кнопок
.radios-label	<legend>	Заголовок группы радио

Кнопки и интерактив

Класс	Тег	Когда использовать
.button	<button>, <a>	Кнопка
.dropdown	<div>	Выпадающий список
.modal, .popup	<div>	Модальное окно
.overlay, .backdrop	<div>	Затемнение под модалкой
.tooltip, .hint	<div>	Подсказка при наведении
.slider, .carousel	<div>	Слайдер
.pagination	<nav>	Пагинация
.breadcrumbs	<nav>	Хлебные крошки

Другое

Класс	Тег	Когда использовать
.socials	<ul>	Список соцсетей
.search	<form>	Форма поиска
.cart, .basket	<div>	Корзина
.summary, .total	<div>	Итоговая сумма
.user	<div>	Блок с информацией о пользователе

---

3. Модификаторы

Размеры

Класс	Значение
.small	маленький
.medium	средний
.large	большой
.wide	широкий
.narrow	узкий

Состояния (префикс is-)

Класс	Когда использовать
.is-active	Элемент активен
.is-current	Текущий пункт меню
.is-open	Открыто (модалка, выпадашка)
.is-hidden, .hidden	Скрыт
.is-visible	Видим
.is-invalid, .is-error	Поле с ошибкой
.is-loading	Идёт загрузка
.is-success	Успешное выполнение

Наличие (префикс has-)

Класс	Когда использовать
.has-icon	Элемент содержит иконку
.has-error	Элемент с ошибкой
.has-underline	Элемент с подчёркиванием

---

4. Пример хорошей структуры

<article class="card">
  <img class="card-image" src="photo.jpg" alt="Фото">
  <div class="card-body">
    <h3 class="card-title">Название</h3>
    <p class="card-description">Описание</p>
    <a class="card-link button" href="#">Подробнее</a>
  </div>
</article>

---

5. Важные принципы

1. Каждый класс должен иметь смысл. Если класс не используется — удаляй.
2. Приоритет — переиспользование. Один класс для многих элементов, если они выглядят одинаково.
3. Модификаторы через дополнительные классы. Не создавай отдельные классы для каждого варианта.
4. Префиксы is- и has- делают код читаемым — сразу понятно, что это состояние.
5. Единый стиль в проекте. Договорись с командой (или сам с собой) и придерживайся.

---

Полезные ресурсы

• БЭМ (методология)
• Как называть классы в CSS
• HTMLbook — правила именования