![Режимы и состояния в SCSS Режимы и состояния в SCSS](https://habrastorage.org/files/53f/e19/e31/53fe19e31f584fffa061d8b9cc6e572b.png)
Очень лаконичная статья про БЭМ.
Плохо
Был такой твит от Виталия Харисова, который наглядно демонстрирует результат непонимания основы БЭМ.
Если случай про вас, посмотрим на рисунок ниже.
![Соотношение Режим-Состояние Соотношение Режим-Состояние](https://habrastorage.org/files/ac6/e32/f0f/ac6e32f0f1814ac4adac7c6ee7e47724.png)
При слегка неверном понимании БЭМ, код стилей выходит примерно таким:
.block { }
.block__elem1 { }
.block__elem1__elem2 { }
.block__elem1__elem2__elem3 { }
Хорошо
В разметке вложенность элементов — это норма, но в БЭМ все элементы Блока — это просто элементы, без какой либо зависимости от уровня вложенности относительно друг друга. БЭМ-дерево Элементов в рамках одного блока имеет один уровень вложенности. Смотрим на следующий рисунок.
![Пример с кнопками Пример с кнопками](https://habrastorage.org/files/7c6/ca2/865/7c6ca286548c41b8b448b608ef2ba57c.png)
Теперь код выходит примерно таким:
.block { }
.block__elem1 { }
.block__elem2 { }
.block__elem3 { }
Успех.
Оригинал статьи