БЭМ - блок, элемент, модификатор.
БЭМ - компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код.
Методология БЭМ была разработана в Яндексе для улучшения качества написания кода и увеличения скорости разработки.
Началось все конечно с личных потребностей Яндекса, но в итоге все переросло во что-то большее - методологию БЭМ начали использовать по всему миру, она стала очень эффективной и популярной у разработчиков и компаний, которые занимаются разработкой.
Немного о составляющей методологии
Сейчас я расскажу вкратце, что из себя представляет методология БЭМ.
Блок
Блок в БЭМ - это функционально независимый компонент страницы, который может быть повторно использован.
К особенностям этого компонента относят то, что название блока должно отражать точный смысл блока (что это?). Также по БЭМ, блоку нельзя задавать свою геометрию, то есть отступы и границы, которые влияют на размер, а еще нельзя указывать позиционирование.
Плюсом в этом выделяют то, что таким образом, блок можно будет использовать где-то еще, просто копируя его в другое место или перенеся с места на место.
Пример (мы хотим создать меню сайта):
<div class="black-menu"></div> (неверная запись, описывает внешний вид)
<div class="menu"></div> (записано правильно, т.к отражает смысл блока)
Ну с блоками все в принципе ясно, кроме запрета на использование позиционирования и отступов, потому что некоторым это будет не привычно.
Элемент
Элемент - это составная часть блока.
Элемент нельзя отделить от блока.
Имя элемента содержит название блока и название элемента в виде: блок__название-элемента, или блок__названиеэлемента. Разделителем служит двойное подчеркивание (__).
Обязательно, название элемента должно охарактеризовать смысл (что это?).
Элемент необязательная часть блока, блок может не содержать элементов.
Модификатор
Характеризует вид, поведение или состояние. Бывает булевым или ключ-значением.
По БЭМ, модификатор не может быть отделен от элемента, он его как бы модифицирует, указывая его новое состояние или вид.
Мой вывод
Эта методология становится удобной, если в ней разобраться и понять, как она работает. Но буду честен - можно обойтись и без нее, либо использовать частично, от этого не будет хуже, если вы и так писали структурированно и понятно.
Некоторые способы написания кода по БЭМ возможно вам уже знакомы, просто вы так делали сами по себе, без всяких методологий.
Подробнее о БЭМ, ее понятиях и составляющих вы можете прочитать в документации по ссылке: https://ru.bem.info/