В нашем справочнике есть раздел, посвященный CSS, в котором можно посмотреть все свойства в языке.
Изображения
image, img, picture, pic — картинка
icon — иконка
logo — логотип
userpic, avatar — юзерпик, маленькая картинка пользователя
thumbnail, thumb — миниатюра, уменьшенное изображение
title, subject, heading, headline, caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead, tagline — лид-абзац в тексте
text — текстовый контент
desc — описание, вариант текстового контента
excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее...»
quote, blockquote — цитата
snippet — пример кода
link — ссылка
copyright, copy — копирайт
Списки
list, items — список
item — элемент списка
Блоки
page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
main, 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, xs — маленький, крохотный
small, sm — небольшой
medium, base — средний
big, large, lg — большой
huge, xl — огромный
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 — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию
overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон
Состояния
active, current — активный элемент, например, текущий пункт меню
visible — видимый элемент
hidden — скрытый элемент
error — статус ошибки
warning — статус предупреждения
success — статус успешного выполнения задачи
pending — состояние ожидания, например, перед сменой статуса на error или success
Примеры использования
Простой список
<ul class="list">
<li class="item">Первое</li>
<li class="item">Второе</li>
<li class="item">Третье</li>
</ul>Картинка пользователя (юзерпик)
<div class="user">
<img class="user__img" src="userpic.png" alt="Дормідонт Петрович">
<a class="user__link" href="#">Дормідонт Петрович</a>
</div>Галерея
<div class="gallery">
<ul class="gallery__list">
<li class="gallery__item">
<img class="gallery__img" src="flowers.jpg" alt="Цвітемо як востаннє">
</li>
<li class="gallery__item">
<img class="gallery__img" src="trees.jpg" alt="Парк Три сосни»">
</li>
</ul>
</div>Навигация
<nav class="nav">
<a class="nav__link nav__link--active">Головна</a>
<a class="nav__link" href="#">Другорядний</a>
<a class="nav__link" href="#">Третя з кінця</a>
<a class="nav__link" href="#">Передостання</a>
<a class="nav__link" href="#">Зовсім кінець</a>
</nav><nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__item--current">
<a class="nav__link">Головна</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Статті</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Фотогалерея</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Контакти</a>
</li>
</ul>
</nav>Виджет в боковой колонке
<div class="widget">
<h4 class="widget__title">Вирощуємо желе</h4>
<div class="widget__content">
<p>Щоб виростити товариське доброзичливе желе,
нам знадобиться рулон поролону, два кілограми цукру,
три яйця та пів чайної чашки ацетону.</p>
<a class="widget__link" href="#">Не читати далі...</a>
</div>
</div>Блок новостей
<div class="news">
<h3 class="news__title">Ворашні новини</h3>
<ul class="news__list">
<!-- до класу елемента додаємо клас блоку,
щоб створити новий простір імен -->
<li class="news__item item-news">
<h4 class="item-news__title">Змагання серед вобли з ковзанярського спорту</h4>
<div class="item-news__text">
<p>Перемогла команда кільок з Одеси</p>
<a href="#" class="item-news__link">Читати далі</a>
</div>
</li>
<li class="news__item item-news">
<h4 class="item-news__title">Вчені уточнили роль напилка у догляді за нігтями</h4>
<div class="item-news__text">
<p>Британські вчені високо оцінили внесок
напилка у відрощування півтораметрових нігтів.</p>
<a href="#" class="item-news__link">Не читати далі</a>
</div>
</li>
</ul>
</div>Статья или пост в блоге (простой вариант)
<article class="article">
<h3 class="article__title">Намацуємо чакри у пучка петрушки</h3>
<time class="article__datetime">32 травня, 10:87</time>
<div class="article__author author-article">
<img class="author-article__img" src="userpic.png" alt="Клішня Андріївна">
<a class="author-article__link" href="#">Клішня Андріївна Бойко</a>
<div class="author-article__desc">Наш експерт з чакрів</div>
</div>
<div class="article__content">
Сходіть на ринок і купіть у стареньких пучок петрушки грам на 100.
Як слід переберіть, очистіть від жуків та гусениць. Жуків віддайте погратися
коту, гусениць поселіть у горщик з кактусами, нехай одна буде Джоном,
друга Біллі, а у вас у горщику тепер буде Дикий Захід. Поверніться
до пучка петрушки. Ласкаво погляньте на нього і добре почухайте
за вухом, можна собі чи коту. Перев'яжіть атласною стрічкою,
Обов'язково зав'яжіть бант. Вітаємо! Тепер у вас є повністю
одомашнений пучок петрушки, який буде весело бігати за вами
по п'ятах і пророщувати своє насіння у ваших капцях.
</div>
</article>Статья или пост в блоге (сложный вариант)
<article class="entry">
<header class="entry__header">
<h3 class="entry__title title-entry">
<a class="title-entry__link" href="#">Гумові качечки як спосіб самопізнання</a>
</h3>
<time class="entry__datetime">32 травня, 10:87</time>
</header>
<div class="entry__author author-entry">
<img class="author-entry__img" src="userpic.png" alt="Василиса Сергійович">
<a class="author-entry__link" href="#">Василиса Сергійович</a>
</div>
<div class="entry__content">
Дістаньте з горища коробку з півсотнею гумових качечок,
залишки після святкування нового року. З качечок
і свічок викладіть пентаграму на підлозі кімнати.
Сядьте посередині у позу лотоса, в кожну руку візьміть
по німецько-бразильському словнику, прокашляйтесь, наберіть
повні груди повітря і голосно і впевнено,
з повною самовіддачею скажіть "Кря!"
</div>
<div class="entry__tags tags-entry">
<h4 class="tags-entry__title">Мітки</h4>
<ul class="tags-entry__list">
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">хоровод своїми руками</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">порцелянові тапки</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">гуталін у кулінарії</a>
</li>
</ul>
</div>
<div class="entry__actions actions-entry">
<ul class="actions-entry__list">
<li class="actions-entry__item actions-entry__item--read">
<a class="actions-entry__link" href="#">238 відповідей</a>
</li>
<li class="actions-entry__item actions-entry__item--write">
<a class="actions-entry__link" href="#">Написати звернення</a>
</li>
<li class="actions-entry__item actions-entry__item--share">
<a class="actions-entry__link" href="#">Поділитися</a>
</li>
</ul>
</div>
</article>
