Слова, часто используемые в CSS-классах

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

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

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

Текст

title, subject, heading, headline, caption — заголовок

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

slogan — слоган

lead, tagline — лид-абзац в тексте

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

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

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

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

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

Блоки

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

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

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

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

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

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

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

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

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

Раскладка

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

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

container, holder, box — контейнер

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

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

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

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

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

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

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

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

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

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

tablet — планшеты

notebook, laptop — ноутбуки

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

Размеры

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

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Разное

search — поиск

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

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

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

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

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

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

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

cart, basket — корзина

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

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

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

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

tooltip, tip — всплывающее подсказки

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

Состояния

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

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

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

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

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

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

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

Простой список

<ulclass="list"><liclass="item">Первое</li><liclass="item">Второе</li><liclass="item">Третье</li></ul>

Картинка пользователя (юзерпик)

<divclass="user"><imgclass="user__img" src="userpic.png" alt="Дормидонт Петрович"><aclass="user__link" href="#">Дормидонт Петрович</a></div>

Галерея

<divclass="gallery"><ulclass="gallery__list"><liclass="gallery__item"><imgclass="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз"></li><liclass="gallery__item"><imgclass="gallery__img" src="trees.jpg" alt="Парк «Три сосны»"></li></ul></div>

Навигация

<navclass="nav"><aclass="nav__link nav__link--active">Главная</a><aclass="nav__link" href="#">Второстепенная</a><aclass="nav__link" href="#">Третья с конца</a><aclass="nav__link" href="#">Предпоследняя</a><aclass="nav__link" href="#">Совсем конец</a></nav>

<navclass="nav"><ulclass="nav__list"><liclass="nav__item nav__item--current"><aclass="nav__link">Главная</a></li><liclass="nav__item"><aclass="nav__link" href="#">Статьи</a></li><liclass="nav__item"><aclass="nav__link" href="#">Фотогалерея</a></li><liclass="nav__item"><aclass="nav__link" href="#">Контакты</a></li></ul></nav>

Виджет в боковой колонке

<divclass="widget"><h4class="widget__title">Выращиваем желе</h4><divclass="widget__content"><p>Чтобы вырастить общительное дружелюбное желе,
нам потребуется рулон поролона, два килограмма сахара,
три яйца и пол чайной чашки ацетона.</p><aclass="widget__link" href="#">Не читать дальше...</a></div></div>

Блок новостей

<divclass="news"><h3class="news__title">Вчерашние новости</h3><ulclass="news__list"><!-- к классу элемента добавляем класс блока, чтобы создать новое пространство имён --><liclass="news__item item-news"><h4class="item-news__title">Соревнования среди воблы по конькобежному спорту</h4><divclass="item-news__text"><p>Победила команда килек из Петрозаводска</p><ahref="#" class="item-news__link">Читать дальше</a></div></li><liclass="news__item item-news"><h4class="item-news__title">Учёные уточнили роль напильника в уходе за ногтями</h4><divclass="item-news__text"><p>Британские учёные высоко оценили вклад
напильника в отращивание полутораметровых ногтей.</p><ahref="#" class="item-news__link">Не читать дальше</a></div></li></ul></div>

Статья или пост в блоге (простой вариант)

<articleclass="article"><h3class="article__title">Нащупываем чакры у пучка петрушки</h3><timeclass="article__datetime">32 мая, 10:87</time><divclass="article__author author-article"><imgclass="author-article__img" src="userpic.png" alt="Клешня Андреевна"><aclass="author-article__link" href="#">Клешня Андреевна Долгорукая</a><divclass="author-article__desc">Наш эксперт по чакрам</div></div><divclass="article__content">
Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
к пучку петрушки. Ласково взгляните на него и как следует почешите
за ухом, можно себе или коту. Перевяжите атласной ленточкой,
непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
одомашненный пучок петрушки, который будет весело бегать за вами
по пятам и проращивать свои семена в ваших тапках.
</div></article>

Статья или пост в блоге (сложный вариант)

<articleclass="entry"><headerclass="entry__header"><h3class="entry__title title-entry"><aclass="title-entry__link" href="#">Резиновые уточки как способ самопознания</a></h3><timeclass="entry__datetime">32 мая, 10:87</time></header><divclass="entry__author author-entry"><imgclass="author-entry__img" src="userpic.png" alt="Василиса Сергеевич"><aclass="author-entry__link" href="#">Василиса Сергеевич</a></div><divclass="entry__content">
Достаньте с чердака коробку с полусотней резиновых уточек,
оставшихся после празднования нового года. Из уточек
и горящих свечей выложите пентаграмму на полу комнаты.
Сядьте посередине в позу лотоса, в каждую руку возьмите
по немецко-бразильскому словарю, прокашляйтесь, наберите
полную грудь воздуха и громко и уверенно,
с полной самоотдачей скажите "Кря!"
</div><divclass="entry__tags tags-entry"><h4class="tags-entry__title">Метки</h4><ulclass="tags-entry__list"><liclass="tags-entry__item"><aclass="tags-entry__link" href="#">хоровод своими руками</a></li><liclass="tags-entry__item"><aclass="tags-entry__link" href="#">фарфоровые тапки</a></li><liclass="tags-entry__item"><aclass="tags-entry__link" href="#">гуталин в кулинарии</a></li></ul></div><divclass="entry__actions actions-entry"><ulclass="actions-entry__list"><liclass="actions-entry__item actions-entry__item--read"><aclass="actions-entry__link" href="#">238 ответов</a></li><liclass="actions-entry__item actions-entry__item--write"><aclass="actions-entry__link" href="#">Написать в спортлото</a></li><liclass="actions-entry__item actions-entry__item--share"><aclass="actions-entry__link" href="#">Поделиться</a></li></ul></div></article>