БЕМ

Блок-Елемент-Модифікатор

Блок - самодостатній 
Його можна ще раз використати, а назва блоку відображає що це: меню, кнопка, помилка...
Блоку не рекомендовано давати 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>