БЭМ

- компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Название блока

- характеризует, что это?, а не какой? как выглядит?

пр:<div class="error"></div> пр ошибки:<div class="red-text"></div>

Блоки можно вкладывать в друг друга, с любым уровнем вложенности

Элемент

- составная часть блока, отделяется от блока двумя подчеркиваниями.

- характеризует, что это?, а не какой? как выглядит?

пр:имя-блока__имя-элемента

Модификатор

- отделяется от блока или элемента одним подчеркиванием.

- сущность определяет внешний вид, состояние или поведение блока или элемента.

- может кроме имени-модификатора, иметь значение-модификатора, которое от имени отделяется одним подчеркиванием.

пр:имя-блока_имя-модификатора_значение-модификатораимя-блока__имя-элемента_имя-модификатора_значение-модификатора

Стиль написания имен и значений элементов, блоков и модификаторов.

- рекомендуется писать через дефис, или все с маленькой буквы, или использовать camelCase.

пр:

Подробнее:

БЭМru.bem.info БЭМ — Википедия