Приклади готових HTML-блоків із вірними назвами CSS-класів по БЕМ (BEM)
Привіт:) Це мій перший пост у блозі! Вирішив присвятити його шпаргалці з вірними назвами класів БЕМ із прикладами блоків.
- Назви класів БЕМ
- Блок + Елемент
- Блок + Елемент + Модифікатор
- Якщо потрібно зробити елемент елемента
- Простий список
- Картинка користувача (юзерпік)
- Галерея
- Навігація (простий варіант)
- Навігація (складний варіант)
- Віджет у боковій колонці
- Блок новин
- Стаття або пост у блозі (простий варіант)
- Стаття або пост у блозі (складний варіант)
- Розмітка сторінки
- Слова, які часто використовуються у CSS-класах
- Зображення
- Текст
- Списки
- Блоки
- Розкладка
- Елементи керування
- Медіавирази
- Розміри
- Різне
- Стани
Назви класів БЕМ
Приклади блоків з БЕМ-класами.
Блок + Елемент
Нехай є блок із заголовком, текстом та кнопкою всередині, наприклад, спливаюче вікно-попап. HTML-розмітка:
<div>
<h3>Заголовок</h3>
<div>Текст</div>
<button>Кнопка</button>
</div>
Додаємо клас, який містить призначення елемента: .popup
:
<div class="popup">
<h3>Заголовок</h3>
<div>Текст</div>
<button>Кнопка</button>
</div>
Тепер спробуємо додати класи вкладеним елементам:
<div class="popup">
<h3 class="title">Заголовок</h3>
<div class="text">Текст</div>
<button class="button">Кнопка</button>
</div>
Класи зручні, але не унікальні. Якщо на сторінці будуть ще елементи із класами .title
та .text
, їхні стилі можуть торкнутися елементів у підвалі. Селектор типу .popup .title
може у майбутньому створити проблеми зі специфічністю. Можна придумати інші класи, але чим більше схожих за смислом елементів, тим складніше придумувати нові класи.
А тепер застосуємо БЕМ-нотацію: кожному елементу всередині блока додамо префікс із класом батька, наприклад, для заголовку це буде popup__title
:
<div class="popup">
<h3 class="popup__title">Заголовок</h3>
<div class="popup__text">Текст</div>
<button class="popup__button">Кнопка</button>
</div>
Тепер ці класи легко вирішують одразу дві задачі. По-перше, завдяки унікальним класам стилі для них ніколи не пересікатимуться з іншими подібними елементами на сторінці. А по-друге, із таких класів одразу видно, що це елементи блоку .popup
.
Блок + Елемент + Модифікатор
Для прикладу візьмемо сервісне повідомлення на сайті. Зазвичай такі повідомлення бувають різних видів. Наприклад, повідомлення про успішну дію або про помилку.
<div class="message">
<h3 class="message__title">Заголовок повідомлення</h3>
<div class="message__text">Текст повідомлення</div>
</div>
Логічно використовувати одну і ту ж розмітку, але з різними колірними темами. Саме тут стануть у нагоді модифікатори.
<div class="message message--success">
<h3 class="message__title">Заголовок повідомлення</h3>
<div class="message__text">Текст повідомлення</div>
</div>
<div class="message message--error">
<h3 class="message__title">Заголовок повідомлення</h3>
<div class="message__text">Текст повідомлення</div>
</div>
Обидвом елементам можна додати однакові стилі, використовуючи загальний клас .message
. Також буде легко додати окремі стилі для кожного з них, використовуючи унікальний клас з модифікатором:
.message {
border: 1px solid gray;
}
.message--success {
border-color: green;
}
.message--error {
border-color: red;
}
Обидва повідомлення будуть мати рамку товщиною 1 піксель, але для повідомлення про успішне завершення операції вона буде зеленою, а для повідомлення про помилку — червоною.
до змісту ↑Якщо потрібно зробити елемент елемента
Наприклад, на сторінці є блок новин:
<div class="news">
<h3>Новини</h3>
<ul>
<li><!-- новина --></li>
<li><!-- новина --></li>
</ul>
</div>
Заголовок блоку логічно отримує клас .news__title
, список — .news__list
, а окрема новина — .news__item
:
<div class="news">
<h3 class="news__title">Новини</h3>
<ul class="news__list">
<li class="news__item"><!-- новина --></li>
<li class="news__item"><!-- новина --></li>
</ul>
</div>
Тут не повинно виникнути ніяких проблем. Тепер додамо розмітку окремої новини:
<div class="news">
<h3 class="news__title">Новини</h3>
<ul class="news__list">
<li class="news__item">
<h4>Заголовок новини</h4>
<p>Текст новини</p>
</li>
<li class="news__item"><!-- новина --></li>
</ul>
</div>
Нам потрібно додати клас заголовкові новини. Перше, що спадає на думку, — це .news__title
, але такий клас вже зайнятий. Припустимо, що другий елемент буде не .title
, а .subject
, тоді у CSS отримаємо наступне:
.news__title { ... }
.news__subject { ... }
Без додаткових коментарів буде неможливо зрозуміти який із них є заголовком всього блоку, а який — окремою новиною. Так не годиться.
Наступний варіант — .news__item__title
, але в БЕМ не можна створювати елемент елемента, і це зрозуміло, бо виходить каша. Ще варіант: .news__item-title
— теж не годиться, бо може бути неочевидним як title
співвідноситься з item
. Як же бути?
Рішення просте: на рівні елементу .news__item
можна оголосити новий блок (наприклад, .news-item
) та будувати вкладені класи вже відносно нього. Так, це не самостійний блок що перевикористовується. Тут оголошення блоку потрібне для того, щоб розвантажити селектори. Що виходить:
<div class="news">
<h3 class="news__title">Новини</h3>
<ul class="news__list">
<li class="news__item news-item">
<h4 class="news-item__title">Заголовок новини</h4>
<p class="news-item__text">Текст новини</p>
</li>
<li class="news__item"><!-- новина --></li>
</ul>
</div>
Проблема вирішена: нам більше не потрібно використовувати монструозні класи, при цьому клас точно описує елемент, і в CSS буде одразу зрозуміло який клас за що відповідає:
.news__title { ... }
.news-item__title { ... }
Простий та зручний вихід із незручної ситуації.
до змісту ↑Простий список
<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 gallery--slider">
<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__tilte">Вирощуємо желе</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__tilte">Мітки</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>
<menu class="entry__menu menu-entry">
<ul class="menu-entry__list">
<li class="menu-entry__item menu-entry__item--read">
<a class="menu-entry__link" href="#">238 відповідей</a>
</li>
<li class="menu-entry__item menu-entry__item--write">
<a class="menu-entry__link" href="#">Написати у спортлото</a>
</li>
<li class="menu-entry__item menu-entry__item--share">
<a class="menu-entry__link" href="#">Поділитися</a>
</li>
</ul>
</menu>
</article>
до змісту ↑Розмітка сторінки
<!-- Шапка сайту -->
<header class="site-header">
<h1 class="site-header__title">Назва сайту</h1>
<nav class="site-header__nav site-nav">
<a href="#" class="site-nav__link">Про продукт</a>
<a href="#" class="site-nav__link">Про погоду</a>
<a href="#" class="site-nav__link">Про що шумить очерет</a>
</nav>
</header>
<!-- Головний вміст сторінки -->
<main class="site-main">
<!-- Розділи головного вмісту -->
<section class="features">
<h2 class="features__title">переваги</h2>
<ul class="features__list">
<li class="features__item">Високі стелі</li>
[...]
</ul>
</section>
<section class="prices">
<h2 class="prices__title">Тарифи</h2>
<ul class="prices__list">
<li class="prices__item">30 парасольок за хвилину</li>
[...]
</ul>
</section>
</main>
<!-- Бокова колонка -->
<aside class="site-aside">
<div class="widget">
<h3 class="widget__title">Як ми відпочиваємо?</h3>
<div class="widget__text">Читайте у нашій новій книзі «Ніяк»</div>
</div>
</aside>
<!-- Підвал сайту -->
<footer class="site-footer">
<div class="site-footer__socials socials">
<a href="#" class="socials__link socials__link--tw">Twitter</a>
<a href="#" class="socials__link socials__link--fb">Facebook</a>
<a href="#" class="socials__link socials__link--tl">Telegram</a>
</div>
<div class="site-footer__copyright copyright ">
Зроблено <a href="#" class="copyright__link">сусідським молотком</a>
</div>
</footer>
до змісту ↑Слова, які часто використовуються у CSS-класах
Гарна манера — іменувати 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