Популярные названия классов HTML/CSS
Когда вы создаёте HTML-структуру и стилизуете её с помощью CSS, важно использовать понятные и предсказуемые имена классов. Это не только облегчает поддержку кода, но и делает его удобным для команды, особенно в крупных проектах. В этой подборке собраны самые популярные и часто встречающиеся названия классов, которые применяются для блоков, текста, изображений, кнопок, форм и других элементов интерфейса. Используйте их как справочник или вдохновение при верстке — пригодится как новичкам, так и опытным разработчикам.
Блоки
page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
body — основная часть (страницы или элемента)
content — содержимое элемента
main — основной контент (чаще всего в теге <main>)
sidebar — боковая колонка (страницы или элемента)
aside — блок с дополнительной информацией
widget — виджет, например, в боковой колонке
area — логическая область контента
container-main — основной контейнер сайта
Раскладка
wrapper, wrap — обёртка, обычно внешняя
inner — внутренняя обёртка
container, holder, box — контейнер
layout — общий шаблон раскладки
grid — раскладка в виде сетки (обычно содержит в себе row и col)
row — контейнер в виде строки
col, column — контейнер в виде столбца
section-wrap — обёртка для раздела
split, splitter — раскладка, делящая экран пополам (например, две колонки)
Текст
title, subject, heading, headline, caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead, tagline — лид-абзац в тексте
text — текстовый контент
desc, description — описание
excerpt — отрывок текста
note, hint — примечание, комментарий
paragraph, para — абзац
copyright, copy — копирайт
Ссылки, кнопки
link — ссылка
button, btn — кнопка
btn-primary, btn-secondary, btn-ghost — стилизованные кнопки
cta, calltoaction — кнопка призыва к действию
nav-link — ссылка в меню навигации
Списки
list — список
item — элемент списка
nav — список меню навигации
breadcrumb — список хлебных крошек
Изображения и медиа
img, image — изображение
video — видео
icon — иконка
logo — логотип
thumbnail, thumb — миниатюра
avatar — аватар пользователя
cover — обложка
media — мультимедиа-контейнер
Формы
form — форма
field — поле формы
input — текстовое поле
textarea — многострочное поле
label — подпись к полю
checkbox — чекбокс
radio — радио-кнопка
select — выпадающий список
error, msg-error — сообщение об ошибке
success, msg-success — сообщение об успехе
Медиавыражения
phone, mobile — мобильные устройства
phablet — большие смартфоны
tablet — планшеты
notebook, laptop — ноутбуки
desktop — настольные компьютеры
retina, hdpi — устройства с высоким разрешением
Размеры
tiny, xs — крохотный
small, sm — небольшой
medium, md — средний
big, large, lg — большой
huge, xl — огромный
xxl, mega — очень большой
narrow — узкий
wide — широкий
fullwidth — на всю ширину
fluid — резиновый/адаптивный
Состояния
active, current — активный элемент
hidden — скрытый
disabled — неактивный элемент
error — ошибка
warning — предупреждение
success — успешно
pending — ожидание
loading — в процессе загрузки
selected — выбранный элемент
focused — элемент в фокусе
hover — состояние при наведении
Анимации и эффекты
animated — элемент с анимацией
fade, fade-in, fade-out — затухание
slide, slide-in, slide-out — сдвиг
zoom, zoom-in, zoom-out — масштабирование
bounce, shake, pulse — эффект движения
transition — плавный переход
spinner — индикатор загрузки
Доступность (Accessibility)
visually-hidden, sr-only — скрывает элемент визуально, но сохраняет его для скринридеров. Применяется для описаний, меток, доступных только для читалок.
aria-hidden — элемент недоступен для скринридеров (чаще применяется как HTML-атрибут, но может быть использован с помощью утилитарного класса).
focus-visible, focus-outline, focus-ring — стилизация фокуса для клавиатурной навигации (например, при нажатии Tab). Упрощает восприятие интерактивных элементов.
skip-link, skip-to-content — ссылка, позволяющая пользователям с клавиатурой или скринридером перейти напрямую к основному контенту, минуя навигацию. Обычно появляется только при фокусе.
role-button, role-link, role-alert — классы-подсказки для стилизации и явного указания роли элемента, если она неочевидна в HTML. Используются совместно с role в разметке.
aria-label, aria-describedby, aria-labelledby — часто применяются в связке с классами label-hidden, label-sr, чтобы сделать форму доступной без визуального дублирования текста.
a11y, accessibility-helper — обобщённые классы для группировки или пометок элементов, связанных с доступностью (редко, но встречаются в крупных библиотеках или дизайн-системах).
no-outline — вредный с точки зрения доступности класс, часто используется для скрытия фокуса. Его следует избегать или компенсировать кастомной подсветкой фокуса.
Дополнительно
active — активный элемент
current — текущий (например, активный пункт меню)
loading — элемент в процессе загрузки
overlay — оверлей
modal — модальное окно
popup — всплывающее окно
tooltip — всплывающая подсказка
highlight — выделение
tag — тег или метка
badge — бейдж
note — заметка
clearfix — утилита очистки обтекания
