Популярные названия классов 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 — утилита очистки обтекания