🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Как достигается изоляция при использовании бэм?
БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым.
🚩Как БЭМ предотвращает конфликты?
🟠Все стили зависят только от конкретного блока
В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.
Кнопка
.button {
background: blue;
color: white;
}
Плохой пример без БЭМ
.container .button {
background: blue;
}
🟠Элементы (`__`) зависят только от своего блока
Стили элемента никогда не зависят от родителя — только от блока.
Заголовок
Текст карточки
.card__title {
font-size: 20px;
}
.card__text {
color: gray;
}
🟠Модификаторы (`--`) изменяют только нужные стили
Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.
Кнопка
Кнопка
.button {
padding: 10px;
border-radius: 5px;
}
.button--red {
background: red;
}
.button--blue {
background: blue;
}
🟠Имена классов уникальны, нет глобальных стилей
В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.
h1 {
color: red;
}
БЭМ-версия
.card__title {
color: red;
}
Ставь 👍 и забирай 📚 Базу знаний