Названия классов HTML/CSS
Блоки
page
— корневой элемент страницы
header
— шапка (страницы или элемента)
footer
— подвал (страницы или элемента)
section
— раздел контента (один из нескольких)
body
— основная часть (страницы или элемента)
sidebar
— боковая колонка (страницы или элемента)
aside
— блок с дополнительной информацией
widget
— виджет, например, в боковой колонке
Раскладка
wrapper
, wrap
— обёртка, обычно внешняя
container
, holder
, box
— контейнер
grid
— раскладка (страницы или элемента) в виде сетки (обычно содержит в
себе row
и col
)
col
, column
— контейнер в виде столбца
Элементы управления
button
, btn
— кнопка, например, для отправки формы
control
— элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
Текст
title
, subject
, heading
, headline
, caption
— заголовок
lead
, tagline
— лид-абзац в тексте
desc
— описание, вариант текстового контента
excerpt
— отрывок текста, обычно используется перед ссылкой «Читать далее…»
Списки
Изображения
image
, img
, picture
, pic
— картинка
userpic
, avatar
— юзерпик, маленькая картинка пользователя
thumbnail
, thumb
— миниатюра, уменьшенное изображение
Медиавыражения
phone
, mobile
— мобильные устройства
phablet
— телефоны с большим экраном (6-7″)
desktop
— настольные компьютеры
Размеры
Состояния
active
, current
— активный элемент, например, текущий пункт меню
warning
— статус предупреждения
success
— статус успешного выполнения задачи
pending
— состояние ожидания, например, перед сменой статуса на error или success
Дополнительно
socials
— блок иконок соцсетей
advertisement
, adv
, commercial
, promo
— рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)
features
, benefits
— список основных особенностей товара, услуги
slider
, carousel
— слайдер, интерактивный элемент с прокруткой содержимого
pagination
— постраничная навигация
user
, author
— пользователь, автор записи или комментария
meta
— блок с дополнительной информацией, например, блок тегов и даты в посте
breadcrumbs
— навигационная цепочка, «хлебные крошки»
more
, all
— ссылка на полную информацию
modal
— модальное (диалоговое) окно
tooltip
, tip
— всплывающие подсказки
preview
— анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию