Методология БЭМ является одной из наиболее популярных методологий разработки веб-интерфейсов. БЭМ - это аббревиатура, которая расшифровывается как "Блок-Элемент-Модификатор". Она была предложена разработчиками компании Яндекс и быстро получила широкое распространение в сообществе веб-разработчиков.
Главной идеей методологии БЭМ является разделение веб-интерфейса на небольшие независимые блоки. Каждый блок представляет собой логическую часть интерфейса, обладающую своими стилями, поведением и структурой. Блоки можно комбинировать и повторно использовать, что делает код более модульным и облегчает его поддержку. Также БЭМ позволяет выдерживать в описании классов некоторую структуру всего документа - если есть такая потребность на проекте.
Лайкосы / Подписки / Курсы
Основные принципы методологии БЭМ включают следующие:
- Блоки: Каждая часть интерфейса является отдельным блоком. Блоки могут быть независимыми и иметь собственные стили, классы и поведение
- Элементы: Элементы являются частями блока и зависят от него. Они отделяются от блока с помощью двойного подчеркивания в классах. Например, `.блок__элемент`
- Модификаторы: Модификаторы позволяют изменять внешний вид или поведение блока или элемента. Они отделяются от блока или элемента с помощью двойного дефиса в классах. Например, `.блок--модификатор` или `.блок__элемент--модификатор`
- Каскадность: Каждый класс в методологии БЭМ должен быть уникальным и специфичным. Это обеспечивает ясность и надежность приложения стилей
- Именование: Классы в методологии БЭМ следуют определенным правилам именования, чтобы обеспечить понятность и легкость разработки. Имена блоков, элементов и модификаторов должны быть осмысленными, описывающими их назначение.
Применение методологии БЭМ помогает улучшить читаемость кода, облегчить его поддержку, упростить совместную работу разработчиков и повысить эффективность разработки. Она стала устойчивым подходом к разработке веб-интерфейсов и широко используется в индустрии - несмотря на то, что в последнее время, с учетом бешеной популярности решений типа React, предпочтение часто отдается css-in-js подходу.