Деление на подразделы условно и не накладывает каких-либо обязательств.
Сделано в дополнение https://github.com/yoksel/common-words.
Cтраница (обычно, корневой элемент).
Сокращение: нет
Пример: page
Контейнер, обёртка.
Сокращение: нет
Пример: container
Сетка (для раскладки блоков по модульной сетке).
Сокращение: нет
Пример:
grid (элемент, внутри которого будет модульная сетка)
Обёртка для ячеек модульной сетки.
Сокращение: нет
Пример:
grid__row (одна или несколько «строк» модульной сетки)
Ячейка модульной сетки.
Сокращение: col
Пример:
grid__col-md-6 (ячейка, занимающая 6 колонок на MD-ширине)
Обёртка чего-либо.
Сокращение: wrap
Пример:
contacts__wrapper (обёртка вокруг контента блока контактов)
Внутренняя обёртка чего-либо (чаще всего — для ограничения ширины и выравнивания по центру).
Сокращение: нет
Пример:
promo__inner (внутренняя обертка промо-блока)
Навигация.
Сокращение: nav
Пример:
main-nav (главная навигация)
Внутренняя реклама, какое-то введение.
Сокращение: нет
Пример: promo
Особенности, преимущества.
Сокращение: нет
Пример:
features (блок с описанием свойств и преимуществ)
Корзина в магазине.
Сокращение: нет
Пример:
cart (блок корзины на странице корзины)
Дополнительная информация (часто — узкая колонка на блоговой странице).
Сокращение: нет
Пример: sidebar, aside
Часть, элемент, отдельная «единица». Универсальное слово, если не удаётся придумать что-то специфическое.
Сокращение: element → el
Пример:
main-nav__list-item (пункт в списке в главной навигации, вероятно, li),
filter__part (типовая часть фильтра)
Виджет.
Сокращение: нет
Пример:
aside__widget (виджет в блоке дополнительной информации)
Логотип.
Сокращение: нет
Пример:
logo (вы не поверите...)
.partner__logo (логотип партнёра)
Поле формы.
Сокращение: нет
Пример:
field-text (универсальный блок для набора форм),
field-radio (универсальный блок для набора форм),
field-checkbox (универсальный блок для набора форм),
field-select (универсальный блок для набора форм),
field-file (универсальный блок для набора форм)
Навигация по нескольким страницам (1 2 3 ...).
Сокращение: нет
Пример: pagination
«Хлебные крошки» (Главная > Каталог > Товар).
Сокращение: нет
Пример: breadcrumbs
Модальное окно.
Сокращение: нет
Пример: modal
Всплывающий блок (обычно, по клику на чем-либо).
Сокращение: нет
Пример: popup
Всплывающая подсказка, небольшой блок (обычно, по наведению на что-либо).
Сокращение: нет
Пример: tooltip
Копирайт.
Сокращение: нет
Пример: copyright
Кнопка/кнопки. Сама по себе кнопка — всегда БЭМ-блок. Может иметь миксование с БЭМ-элементами. Слово может использоваться в классах-обёртках (см. пример).
Сокращение: btn
Пример:
btn (отдельная кнопка),
.promo__btns (обёртка для кнопок в промо-блоке)
Заголовок (часто применяется на заголовочных тегах, но не обязательно на них).
Сокращение: нет
Пример:
promo__title (заголовок промо-блока)
Подзаголовок.
Сокращение: нет
Пример:
post__subtitle (подзаголовок записи в блоге)
Название.
Сокращение: нет
Пример: product__name
Слоган.
Сокращение: нет
Пример:
logo__slogan (слоган в блоке логотипа)
Пользователь.
Сокращение: нет
Пример:
user (блок авторизованного/неавторизованного посетителя, к примеру, в шапке)
Метка, тег.
Сокращение: нет
Пример:
label (лейбл),
post__tags-list (список меток записи в блоге)
Рубрика(и).
Сокращение: cat
Пример:
post__cats (рубрики записи в блоге)
Выпадающий элемент (направление выпадения не имеет значения).
Сокращение: drop
Пример:
filter__drop (выпадающий по клику блок в фильтре)
Поиск.
Сокращение: нет
Пример:
search-form (блок быстрого поиска, возможно, в «шапке»)
Социальные сети (иконки, обычно).
Сокращение: нет
Пример:
socials__list (список с соц. ссылками)
Карусель, слайдер (несколько сменяющих друг друга слайдов).
Сокращение: нет
Пример:
promo__slider (карусель в промо-блоке)
Верхняя часть, «шапка».
Сокращение: нет
Пример:
page-header («шапка» страницы),
post__header («шапка» записи в блоге)
Нижняя часть, «подвал».
Сокращение: нет
Пример:
page-footer («подвал» страницы),
post__footer («подвал» записи в блоге)
Добавление чего-либо.
Сокращение: add
Пример:
location__btn-add (кнопка добавления в блоке какого-то места)
Информация о какой-либо сущности.
Сокращение: нет
Пример:
post__info (информация о записи в блоге)
Главная контентная часть чего-либо.
Сокращение: нет
Пример:
post__body (основной текстовой фрагмент записи в блоге)
Содержимое чего-либо.
Сокращение: нет
Пример:
post__content (основной текстовой фрагмент записи в блоге)
Крупный раздел чего-либо.
Сокращение: нет
Пример:
promo__section (большой раздел промо-блока)
Иконка.
Сокращение: нет
Пример:
icon--twitter (иконка соц. сети (модификатор))
Cсылка.
Сокращение: нет
Пример:
product__more-link (ссылка «Далее» в блоке продукта)
Cписок.
Сокращение: нет
Пример:
features__list (список преимуществ)
Описание какой-либо сущности
Сокращение: descr
Пример:
product__descr (описание продукта)
Изображение.
Сокращение: img
Пример:
promo__img (изображение в промо-блоке)
Изображение.
Сокращение: pict, pic
Пример:
promo__pict (картинка в промо-блоке)
Переключение, тумблер. Часто — «гамбургер», переключающий показ/сокрытие главного меню (на медиа-условии, при котором меню скрывается под «гамбургером»).
Сокращение: нет
Пример:
main-nav__toggle (переключатель видимости гл. меню)
Вкладка.
Сокращение: нет
Пример:
tabs (вкладки),
promo__tab (вкладка в промо-блоке)
Миниатюра (обычно, в какой-либо галерее).
Сокращение: thumb
Пример:
photo__thumb (миниатюра в фотогалерее)
Аватарка, маленькая картинка пользователя.
Сокращение: нет
Пример:
user__avatar (аватарка пользователя в блоке пользователя в шапке)
Текстовой фрагмент (обычно, выводимый из CMS).
Сокращение: нет
Пример:
about__text (текст «о нас», вероятно обертка вокруг нескольких параграфов)
Автор.
Сокращение: нет
Пример:
post__author (имя/ник автора записи в блоге)
«далее», «подробнее».
Сокращение: нет
Пример:
product__more-link (кнопка или ссылка в промо-блоке, предлагающая ознакомиться подробнее)
Активный элемент (пункт навигации, активный таб).
Сокращение: нет
Пример:
main-nav__item--active (модификатор на пункте гл. навигации, соответствущем странице, на которой пребывает посетитель)
hidden
Скрытое.
Сокращение: нет
Пример:
product--hidden (модификатор, скрывающий блок продукта)
Показанное.
Сокращение: нет
Пример:
product--shown (модификатор, показывающий продукт)
Состояние ошибки.
Сокращение: нет
Пример:
field-text--error (модификатор, помечающий блок текстового поля как ошибочное)
Состояние успеха.
Сокращение: нет
Пример:
field-text--success
Предупреждение.
Сокращение: нет
Пример:
btn--warning (модификатор, меняющий вид кнопки)
Ожидание чего-либо (к примеру, ответа севера после асинхронной отправки формы).
Сокращение: нет
Пример:
btn--pending (модификатор, меняющий вид кнопки)
Очень маленький.
Сокращение: xs
Пример:
grid__col-xs-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-xs (имя переменной с соотв. шириной вьюпорта в значении)
Маленький.
Сокращение: sm
Пример:
grid__col-sm-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-sm (имя переменной с соотв. шириной вьюпорта в значении)
Средний.
Сокращение: md
Пример:
grid__col-md-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-md (имя переменной с соотв. шириной вьюпорта в значении)
Большой.
Сокращение: lg
Пример:
grid__col-lg-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-lg (имя переменной с соотв. шириной вьюпорта в значении)
Очень большой.
Сокращение: xl
Пример:
grid__col-xl-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-xl (имя переменной с соотв. шириной вьюпорта в значении)
Сафсэм балшой.
Сокращение: xxl
Пример:
grid__col-xxl-6 (ячейка, занимающая 6 колонок модульной сетки на соотв. ширине),
screen-xxl (имя переменной с соотв. шириной вьюпорта в значении)
Узкий.
Сокращение: нет
Пример:
btn--narrow (модификатор, делающий кнопку узкой)
Широкий.
Сокращение: нет
Пример:
btn--wide (модификатор, делающий кнопку широкой)
Мобильные устройства (телефоны до 5 дюймов).
Сокращение: нет
Пример:
promo--phone (модификация промо-блока для соотв. устройств)
Планшеты (ориентировочно до 12 дюймов).
Сокращение: нет
Пример:
promo--tablet (модификация промо-блока для соотв. устройств)
Ноутбуки.
Сокращение: нет
Пример:
promo--laptop (модификация промо-блока для соотв. устройств)
Настольные компьютеры.
Сокращение: нет
Пример:
promo--desktop (модификация промо-блока для соотв. устройств)
Предыдущее (часто - ссылка/кнопка).
Сокращение: prev
Пример:
slider__prev (кнопка/стрелка на слайдере)
Следущее (часто - ссылка/кнопка).
Сокращение: нет
Пример:
slider__next (кнопка/стрелка на слайдере)
Рекламный фрагмент (осторожно, может вырезаться баннерорезками).
Сокращение: adv
Пример:
aside__adv (рекламный блок в сайдбаре)
Фон (чаще — какое-то изменение фонового цвета блока).
Сокращение: bg
Пример:
top-rated--bg-gray (модификация фонового цвета блока самых рейтинговых товаров/услуг)
Число.
Сокращение: num
Пример:
field-text--num (модификатор для текстового поля, позволяющий иначе оформить числовые поля)