Методология БЭМ
Что, как и зачем БЭМ - ( Блок, Элемент, Модификатор) это методология, которая дает возможность осуществлять компонентный подход в веб-разработке
Это значит, что вы можете свой интерфейс поделить на независимые блоки и в дальнейшем переиспользовать их
Методологию используют, чтобы код был чище и более читаемый.
Также, с БЭМ легче поддерживать большие проекты
Подробнее про БЭМ
Блок
Блок - это независимый компонент, который можно переиспользовать.
По методологии БЭМ , блоку задается class, который характеризует его смысл ( menu, card, breadcrumbs)
HTML:
CSS:
.block{
}
Элемент
Элемент - это часть блока, который не может использоваться нигде, кроме как внутри своего родителя. Им задается class по схеме: имя-блока__имя-элемента
HTML:
CSS:
.block{}
.block__element{}
SCSS:
.block{
&__element{
}
}
Модификатор
Модификатор определяет внешний вид, поведение и/или состояние блока или элемента
Обозначать модификатор можно двумя способами:
имя-блока__имя-элемента—имя модификатора
имя-блока__имя-элемента_имя модификатора
HTML:
CSS:
.block--modifier{}
.block__element--modifier{}
SCSS:
.block{
&--modifier{
}
&__element{
&--modifier
}
}
в документации по БЭМ ( ru.bem.info) описан второй способ, где используется одинарное нижнее подчеркивание ( _ ), но я много раз встречал, где используют двойной дефис ( - )
Пример реального блока можно увидеть на втором фото в каруселе
Я сам использую в работе эту методологию и рекомендую тем, кто еще не начал. Вы удивитесь, насколько легче станет поддерживать код, и как это экономит время
