Блок-Елемент-Модифікатор
Блок - самодостатній
Його можна ще раз використати, а назва блоку відображає що це: меню, кнопка, помилка...
Блоку не рекомендовано давати margin чи id
Блоки можна вкладати оди в одний
<form class="search-form">
</form>
Елемент - знаходяться в блоці
Не може використовуватися самостійно
Відповідає на питання який? чи є текстом
Елементи можна вкладати оди в одний
block__elem1__elem2
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input">
<button class="search-form__button">Знайти</button>
</div>
</form>
Елементи можуть бути не прив'язаними до блока:
<div class="search-form">
<input class="input">
<button class="button">Знайти</button>
</div>
Модифікатор - визначає зовнішній вигляд, стан або поведінку блоку чи елементу
Вказує на:
- зовнішній вигляд: який розмір? тема?
- стан: чим відрізняється від інших? відключений, має фокус...
- поведінка: як поводить себе? Як взаємодіє з користувачем?
<form class="search-form search-form_theme_islands">
<button class="search-form__button search-form__button_disabled">Знайти</button>
<button class="search-form__button search-form__button_size_m">Знайти</button>