В основе методологии БЭМ (блок, элемент, модификатор) лежит компонентный подход к веб-разработке по принципу разделения интерфейса на независимые блоки. Также БЭМ включает в себя набор библиотек, фреймворков и вспомогательных элементов для интерфейса.
⠀
Используя БЭМ, можно получить HTML с именами классов, которые показывают взаимодействие частей кода: независимых блоков, элементов (дочерних компонентов) и модификаторов блока. Правила именования позволяют сделать код проекта информативным, а это снижает порог входа для других разработчиков.
⠀
А также БЭМ:
▪️ позволяет многократно использовать компоненты;
▪️ упрощает масштабирование и командную работу;
▪️ улучшает код и облегчает рефакторинг;
▪️ предотвращает взаимное влияние компонентов друг на друга;
▪️ даёт возможность использовать много раз одни и те же фрагменты кода, даже на одном DOM-узле;
▪️ избавляет от необходимости комментировать код.
⠀
Если рассматривать подробно понятие БЭМ, то ⬇️
⏩ Блок – это отдельный функциональный элемент, который может использоваться повторно, например, кнопка или главная страница. Принцип работы с блоками: можно вкладывать друг в друга с помощью любой вложенностью.
⠀
⏩ Элемент – часть блока. Их может быть несколько или не быть совсем. Принцип работы с элементами: вложенность, принадлежность, необязательность.
⠀
⏩ Модификатор – определяет состояние, внешний вид или поведение элемента/блока. Принцип работы модификатора: нельзя использовать самостоятельно, может изменять вид, поведение или состояние сущности, а не заменять ее.
⠀
Самые частые ошибки при использовании БЭМ:
— неправильно вложенные блоки и элементы;
— модификаторы без базового класса;
— слишком большие блоки.
⠀
Методология БЭМ признана во всём мире, потому что в отличии от других CSS-концепций работает с самым популярным языком программирования JavaScript.
#methed_про_ит