Модифікатор

Додатковий клас-модифікатор, що визначає зміну зовнішнього вигляду, стану або поведінки блоку або елемента.

Ім'я класу модифікатора:

Повинно бути простим, що описує зміну, яка вноситься.
Обов'язково формується за схемою блок--модифікатор або блок__елемент--модифікатор.

Клас-модифікатор ніколи не повинен використовуватися самостійно, а тільки разом із тим класом блоку або елемента, який він доповнює. У прикладі імена модифікаторів вказують тип повідомлення.

<!-- ✅ Є базовий клас -->
<p class="alert"></p>

<!-- ✅ Є базовий клас і клас-модифікатор -->
<p class="alert alert--success"></p>
<p class="alert alert--error"></p>
<p class="alert alert--warning"></p>

<!-- ❌ Немає базового класу, немає значення -->
<p class="alert--success"></p>

Базові стилі блоку або елемента записуються в їхньому класі. Клас-модифікатор може додавати нові або перевизначати вже існуючі властивості.

Кнопка-конструктор

Створимо компонент кнопки з іконкою і текстом. Кнопка - це блок, іконка і текст - його необов'язкові елементи.

<button class="button" type="button">
  <svg class="button__icon">...</svg>
  <span class="button__label">В кошик</span>
</button>

Для того щоб задати відступ між іконкою і текстом, необхідно вказати margin, наприклад іконці.

.button__icon {
  margin-right: 10px;
}

Проблема такого рішення в тому, що елементи - це необов'язкова частина блоку та їх HTML-структура може бути довільною. Іконка може бути праворуч від тексту, тоді у неї буде зайвий правий відступ, а потрібен лівий. Тексту може не бути зовсім, тоді і відступи не потрібні.

<!-- Іконка після тексту -->
<button class="button" type="button">
  <span class="button__label">В кошик</span>
  <svg class="button__icon">...</svg>
</button>

<!-- Текст відсутній -->
<button class="button" type="button">
  <svg class="button__icon">...</svg>
</button>

Вирішити це завдання допоможуть модифікатори. Додамо іконці два модифікатора стану - start і end (їх так само можна було назвати наприклад left і right). У цих класах-модифікаторах запишемо стилі для відступів.

.button__icon--start {
  margin-right: 10px;
}

.button__icon--end {
  margin-left: 10px;
}

Тепер ми можемо комбінувати елементи кнопки як конструктор LEGO, і нічого не буде зайвим і не зламається. Все тому, що базові класи блоку та елементів містять загальні стилі для всіх їх варіацій, а модифікатори змінюють стилі у разі потреби.

Кнопка-конструктор​

Кнопка-конструктор