У нас достаточно мало внимание уделено этой базовой, но важной теме. Все почему-то думают, что используют БЭМ, хотя на самом деле им там и не лишь слегка попахивает.
.блок__элемент--модификатор
Нельзя использовать класс с модификатором без основного класса. Например, нельзя задать класс button--outline элементу без класса button.
БЭМ не отменяет обычного css, так что не надо все классы привязывать к блоку, в котором находится ваш элемент.
Допускается стилизация элементов через повышение специфичности при наличие модификатора у класса блока. Пример:
.card {
/* стандартные стили карточки */
}
.card--disabled {
/* стили неактивной карточки */
}
.card__heading {
/* стандартные стили заголовка карточки */
}
.card--disabled .card__heading {
/* стили заголовка неактивной карточки */
}
Бонусом отметьте, как красиво это сворачивается в scss! (Здесь и дальше я буду использовать именно scss синтаксис, для того чтобы сократить количество кода)
.card {
// стандартные стили карточки
&__heading {
// стандартные стили заголовка карточки
}
&--disabled {
// стили неактивной карточки
.card__heading {
// стили заголовка неактивной карточки
}
}
}
<aside> ☝ Некоторые примеры очень простые, но, пожалуйста, отнеситесь к ним с должным уважением, ведь ошибки в самых простых вещах и ведут к тому, что проект сложно поддерживать.
</aside>