[ Методологія БЕМ ]

26.11.2023
49 views

БЕМ (Блок, Елемент, Модифікатор) методологія

БЕМ – це методологія розробки іменування та організації CSS-коду, яка дозволяє створювати зрозумілу та легко підтримувану структуру веб-проекту. Вона розшифровується як “Блок, Елемент, Модифікатор”.

1. Блок (Block)

Блок є незалежним компонентом, який може бути використаний самостійно. Найчастіше, це представляє собою один ізольований елемент сторінки, наприклад, “header”, “menu”, “button”, “input”. Назва блоку є унікальною і має визначати його сутність.

<div class="header">...</div>
<div class="menu">...</div>
<button class="button">Click me</button>
<input class="input" type="text">

2. Елемент (Element)

Елемент – це частина блоку, яка не може бути використана самостійно за межами блоку. Елементи є дочірніми для блоків. Їх імена вказуються через двокрапку після імені блоку.

<div class="header">
  <div class="header__logo">...</div>
  <div class="header__nav">...</div>
</div>

3. Модифікатор (Modifier)

Модифікатор – це зміна стану або вигляду блоку чи елемента. Вони дозволяють змінювати вигляд або поведінку блоку або елементу в різних контекстах. Модифікатори вказуються через подвійний дефіс.

<button class="button button--primary">Primary Button</button>
<input class="input input--error" type="text">

4. Структура CSS класів

БЕМ використовує специфічну структуру іменування класів у CSS:

.block – клас для блоку.
.block__element – клас для елементу блоку.
.block--modifier – клас для модифікатора блоку або елементу.

.button { /* стилі для блоку */ }
.button__icon { /* стилі для елементу блоку */ }
.button--primary { /* стилі для модифікатора блоку */ }

Переваги БЕМ методології:

Чіткість та Прозорість: Завдяки унікальним назвам класів, код стає більш читабельним та прозорим.
Підтримка і Розширення: Легко розширювати та модифікувати код завдяки ізольованій природі блоків і елементів.
Покращена Перевикористаність: Блоки та елементи можна використовувати у різних частинах проекту без неочікуваних стилів.
Легке Управління Структурою HTML і CSS: Зменшує кількість вкладених селекторів, сприяючи покращенню продуктивності.

Приклад 1: Картка статті

HTML:

<div class="article-card">
  <div class="article-card__header">
    <h2 class="article-card__title">Заголовок статті</h2>
  </div>
  <div class="article-card__content">
    <p class="article-card__text">Текст статті...</p>
    <a href="#" class="article-card__link article-card__link--read-more">Читати далі</a>
  </div>
</div>

CSS:

.article-card {
/* Стилі для блоку картки статті */
}

.article-card__header {
/* Стилі для елементу заголовка картки статті */
}

.article-card__title {
/* Стилі для заголовка картки статті */
}

.article-card__content {
/* Стилі для блоку змісту картки статті */
}

.article-card__text {
/* Стилі для тексту картки статті */
}

.article-card__link {
/* Стилі для посилання в картці статті */
}

.article-card__link--read-more {
/* Стилі для модифікатора посилання "Читати далі" */
}

Приклад 2: Форма авторизації

HTML:

<form class="auth-form"> 
  <div class="auth-form__group"> 
    <label class="auth-form__label" for="username">Ім'я користувача</label> 
    <input class="auth-form__input" type="text" id="username" name="username"> 
  </div> 
  <div class="auth-form__group">
    <label class="auth-form__label" for="password">Пароль</label> 
    <input class="auth-form__input" type="password" id="password" name="password"> 
  </div> 
  <button class="auth-form__button auth-form__button--submit" type="submit">Увійти</button> 
</form>

CSS:

.auth-form {
/* Стилі для блоку форми авторизації */
}

.auth-form__group {
/* Стилі для групи елементів у формі авторизації */
}

.auth-form__label {
/* Стилі для елементу мітки у формі авторизації */
}

.auth-form__input {
/* Стилі для елементу введення у формі авторизації */
}

.auth-form__button {
/* Стилі для кнопки у формі авторизації */
}

.auth-form__button--submit {
/* Стилі для модифікатора кнопки "Увійти" */
}

Url successfully copied!