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

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapperwrap — обёртка, обычно внешняя

inner — внутренняя обёртка

containerholderbox — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

colcolumn — контейнер в виде столбца

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

buttonbtn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Текст

titlesubjectheadingheadlinecaption — заголовок

subtitle — подзаголовок

slogan — слоган

leadtagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

link — ссылка

copyrightcopy — копирайт

Списки

listitems — список

item — элемент списка

Изображения

imageimgpicturepic — картинка

icon — иконка

logo — логотип

userpicavatar — юзерпик, маленькая картинка пользователя

thumbnailthumb — миниатюра, уменьшенное изображение

Медиавыражения

phonemobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebooklaptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

biglarge — большой

huge — огромный

narrow — узкий

wide — широкий

Состояния

activecurrent — активный элемент, например, текущий пункт меню

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Дополнительно

search — поиск

socials — блок иконок соцсетей

advertisementadvcommercialpromo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

featuresbenefits — список основных особенностей товара, услуги

slidercarousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

userauthor — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cartbasket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

moreall — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltiptip — всплывающие подсказки

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

Leave a Comment