Что такое методология БЭМ (BEM)

Да ты посмотри, какой народ придумал, блядь! Сидят, чешут репу, как бы так стили покрасивше написать, чтобы потом самому не охуеть от этого бардака. И родилась, сука, методология БЭМ — Блок, Элемент, Модификатор. Не какая-нибудь хитрая жопа, а реально рабочий подход. Смотри, как это, блядь, работает. **Блок** — это типа независимый кусок интерфейса, сам себе царь и бог. `header`, `menu`, `card` — вот это всё блоки. Живут сами по себе, их можно таскать куда угодно. А внутри блока сидят **Элементы**. Это уже его личные прислужники, которые без блока — нихуя не значат. Имена им дают так: сначала имя папаши-блока, потом два подчёркивания, а потом уже имя самого элемента. Получается, типа, `card__image` или `header__logo`. Красиво, блядь! Сразу видно, кто чей сын. Ну и третий кит — **Модификатор**. Это когда нужно блок или элемент чутка подрихтовать. Сделать кнопку не просто кнопкой, а, например, выключенной. Имя строится так: имя того, кого модифицируем, потом два дефиса и суть модификации: `button--disabled` или `card--highlight`. Всё, как в аптеке, ёпта! Вот смотри, как это в коде выглядит, тут всё по-честному: ```html ``` Видишь? `card` — это блок. `card__image`, `card__title`, `card__description` — это его элементы, причём сразу ясно, что они от карточки. А `card--highlight` — это модификатор, который говорит: «Эту карточку, блядь, подсвети!». И в чём же, спрашивается, кайф? А кайф, дружок, в том, что стили друг другу не мешают. Не будет у тебя ситуации, когда ты поправил кнопку в хедере, а у тебя, на тебе, хуй с горы — все кнопки в футере посыпались. Каждый стиль привязан к своему классу, который уникален, как отпечатки пальцев у маньяка. Код поддерживать — одно удовольствие, а не пиздец. И переиспользовать эти блоки можно, как горячие пирожки. Собрал один раз красивый `menu`, и таскай его по всем проектам, хоть до овердохуища.