Приклади готових HTML-блоків із вірними назвами CSS-класів по БЕМ (BEM)

Привіт:) Це мій перший пост у блозі! Вирішив присвятити його шпаргалці з вірними назвами класів БЕМ із прикладами блоків.

Назви класів БЕМ

Приклади блоків з БЕМ-класами.

Блок + Елемент

Нехай є блок із заголовком, текстом та кнопкою всередині, наприклад, спливаюче вікно-попап. 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