Популярные названия классов HTML/CSS

Привет, коллеги!

Ниже собрал справочник популярных названий классов для HTML/CSS, дополнил его соглашениями БЭМ (Блок-Элемент-Модификатор), а также добавил разделы по цветам, карточкам товаров, преимуществам и другим частым паттернам.

БЭМ: Блоки, Элементы, Модификаторы

Синтаксис

• .блок — независимый компонент
• .блок__элемент — часть блока (два подчёркивания)
• .блок—модификатор — модификатор блока (два дефиса)
• .блок__элемент—модификатор — модификатор элемента

Примеры

.card {}                    /* блок */
.card__title {}             /* элемент */
.card__title--large {}      /* модификатор элемента */
.card--featured {}          /* модификатор блока */

Блоки (основные строительные элементы)

Класс	Описание
page	корневой элемент страницы
header	шапка (страницы или элемента)
footer	подвал (страницы или элемента)
section	раздел контента
body	основная часть
content	содержимое элемента
sidebar	боковая колонка
aside	блок с дополнительной информацией
widget	виджет
main	главное содержимое страницы

По БЭМ

.page {}
.page__header {}
.page__main {}
.page__sidebar {}
.page__footer {}

Раскладка (Layout)

Класс	Описание
wrapper, wrap	внешняя обёртка
inner	внутренняя обёртка
container, holder, box	контейнер
grid	сетка (содержит row и col)
row	строка сетки
col, column	столбец сетки
layout	общая раскладка

По БЭМ

.container {}
.container__row {}
.container__col {}
.container__col--main {}
.container__col--sidebar {}

Текст

Класс	Описание
title, heading, headline, caption	заголовок
subtitle	подзаголовок
slogan	слоган
lead, tagline	лид-абзац
text	текстовый контент
desc, description	описание
excerpt	отрывок текста (обычно перед «Читать далее»)
copyright, copy	копирайт
quote	цитата
author	автор
date	дата
meta	мета-информация (теги, дата, категории)

По БЭМ

.article {}
.article__title {}
.article__subtitle {}
.article__meta {}
.article__author {}
.article__date {}
.article__excerpt {}
.article__text {}

Ссылки и кнопки

Класс	Описание
link	ссылка
button, btn	кнопка
cta	кнопка призыва к действию (Call To Action)
more, all	ссылка «Подробнее» / «Все»

По БЭМ с модификаторами

.button {}
.button--primary {}    /* основная кнопка */
.button--secondary {}  /* второстепенная */
.button--outline {}    /* с рамкой */
.button--disabled {}   /* неактивная */
.button--small {}      /* маленькая */
.button--large {}      /* большая */

.link {}
.link--arrow {}        /* со стрелкой */
.link--muted {}        /* приглушённый цвет */

Списки

Класс	Описание
list, items	список
item	элемент списка

По БЭМ

.nav {}
.nav__list {}
.nav__item {}
.nav__link {}

.breadcrumbs {}        /* хлебные крошки */
.breadcrumbs__item {}
.breadcrumbs__link {}

Изображения

Класс	Описание
image, img, picture, pic	картинка
icon	иконка
logo	логотип
userpic, avatar	аватар пользователя
thumbnail, thumb	миниатюра
cover	фоновое изображение / обложка
gallery	галерея

По БЭМ

.logo {}
.logo__image {}
.logo__text {}

.avatar {}
.avatar--small {}
.avatar--large {}

.gallery {}
.gallery__item {}
.gallery__image {}

Элементы управления

Класс	Описание
control	элемент управления
dropdown	выпадающий список
search	поиск
slider, carousel	слайдер
pagination	пагинация
bullet	переключатели в пагинации
modal	модальное окно
popup	всплывающее окно
tooltip, tip	подсказки
preview	анонс / превью
breadcrumbs	«хлебные крошки»
tabs	вкладки
accordion	аккордеон
toggle	переключатель
loader, spinner	индикатор загрузки

По БЭМ

.tabs {}
.tabs__nav {}
.tabs__button {}
.tabs__button--active {}
.tabs__panel {}

.accordion {}
.accordion__item {}
.accordion__header {}
.accordion__content {}
.accordion__content--open {}

.modal {}
.modal__overlay {}
.modal__content {}
.modal__close {}

Цвета (как модификаторы)

В БЭМ цвета лучше выносить в модификаторы или отдельные utility-классы.

Основные цвета

/* Модификаторы для блоков */
.card--primary {}
.card--secondary {}
.card--success {}
.card--warning {}
.card--danger {}
.card--info {}

/* Отдельные utility-классы */
.bg-primary {}
.bg-secondary {}
.bg-dark {}
.bg-light {}

.text-primary {}
.text-muted {}
.text-light {}
.text-dark {}
.text-white {}
.text-black {}

.border-primary {}
.border-danger {}

Примеры использования

.button--primary {
    background: #007cba;
    color: white;
}

.alert--success {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.alert--error {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

Карточка товара / статьи

Частый паттерн — карточка (card).

Структура

.card {}                    /* блок карточки */
.card__image {}             /* изображение */
.card__badge {}             /* бейдж (скидка, новинка) */
.card__title {}             /* заголовок */
.card__rating {}            /* рейтинг */
.card__price {}             /* цена */
.card__price--old {}        /* старая цена */
.card__price--new {}        /* новая цена */
.card__desc {}              /* описание */
.card__button {}            /* кнопка действия */
.card__footer {}            /* подвал карточки */

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

.card--featured {}          /* рекомендуемый товар */
.card--sale {}              /* товар со скидкой */
.card--out-of-stock {}      /* нет в наличии */
.card--compact {}           /* компактная версия */

Преимущества (Features / Benefits)

Блок для списка преимуществ.

Структура

.features {}                /* блок преимуществ */
.features__item {}          /* отдельное преимущество */
.features__icon {}          /* иконка */
.features__title {}         /* заголовок */
.features__desc {}          /* описание */

.benefits {}                /* альтернативное название */
.benefits__item {}
.benefits__icon {}
.benefits__text {}

Пример сетки преимуществ

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.features__item {
    text-align: center;
}

Пользовательские блоки

Класс	Описание
user, author	пользователь / автор
profile	профиль
rating	рейтинг
review	отзыв
comment	комментарий

Структура

.comment {}
.comment__avatar {}
.comment__author {}
.comment__date {}
.comment__text {}
.comment__reply {}

.rating {}
.rating__star {}
.rating__star--filled {}
.rating__value {}

Корзина и заказ (E-commerce)

Класс	Описание
cart, basket	корзина
cart__item	товар в корзине
cart__quantity	количество
cart__total	итого
checkout	оформление заказа
order	заказ
product	товар
catalog	каталог
filter	фильтр

Структура

.cart {}
.cart__table {}
.cart__row {}
.cart__cell {}
.cart__item-image {}
.cart__item-title {}
.cart__item-price {}
.cart__item-quantity {}
.cart__item-total {}
.cart__total-row {}

.checkout {}
.checkout__form {}
.checkout__summary {}

Медиавыражения (брейкпоинты)

Класс / Переменная	Описание
phone, mobile	мобильные устройства
phablet	телефоны с экраном 6-7″
tablet	планшеты
notebook, laptop	ноутбуки
desktop	настольные ПК
wide	широкие экраны

Пример в БЭМ (адаптив через модификаторы)

.card--mobile {}
.card--tablet {}
.card--desktop {}

SCSS-переменные для брейкпоинтов

$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-laptop: 1024px;
$breakpoint-desktop: 1200px;
$breakpoint-wide: 1440px;

Размеры (как модификаторы)

Класс	Описание
xs, tiny	экстра-маленький
sm, small	маленький
md, medium	средний
lg, large, big	большой
xl, huge	огромный
narrow	узкий
wide	широкий

Примеры

.button--sm {}
.button--md {}
.button--lg {}

.card--wide {}
.card--narrow {}

.text--xs {}
.text--xl {}

Состояния (модификаторы)

Класс	Описание
active, current	активный элемент
disabled	отключённый
hidden	скрытый
error	ошибка
warning	предупреждение
success	успех
pending	ожидание
loading	загрузка
open	открыт
closed	закрыт
selected	выбран
focused	в фокусе

Примеры

.form__input--error {}
.form__input--success {}
.button--disabled {}
.modal--open {}
.dropdown--open {}

Utility-классы (вспомогательные)

Полезно иметь набор небольших утилит для быстрой стилизации.

/* Отступы */
.m-0 { margin: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }

/* Выравнивание */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }

/* Flex */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* Отображение */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* Позиционирование */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Скругление */
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.circle { border-radius: 50%; }

Дополнительные блоки

Класс	Описание
socials	блок иконок соцсетей
advertisement, adv, promo	рекламный блок (осторожно — может резаться адблоком)
features, benefits	список преимуществ
user, author	пользователь / автор
meta	мета-информация
cart, basket	корзина
more, all	ссылка на полную информацию
news	новости
blog	блог
post	пост / запись
related	похожие / связанные товары или записи
testimonial	отзыв клиента
faq	блок вопросов-ответов
team	блок команды
services	услуги
portfolio	портфолио
subscribe	подписка на рассылку
contact	контакты
map	карта

Этот справочник можно использовать как шпаргалку при вёрстке. Основные принципы:

1. Используйте осмысленные имена — класс должен говорить, что делает элемент
2. Придерживайтесь единого стиля (kebab-case для БЭМ)
3. Избегайте слишком глубокой вложенности в CSS
4. Модификаторы лучше, чем отдельные классы для вариантов одного компонента

Сохраните себе — пригодится!