Как только в проекте появляется больше пары десятков классов, без какой-то системы именования начинается путаница — одинаковые по смыслу названия конфликтуют между разными компонентами, а понять по одному только имени класса, к чему он относится, становится непросто.
БЭМ — методология именования, где каждый класс описывает блок, элемент внутри него и, при необходимости, модификатор состояния. Например, card это блок, card__title его элемент, а card--featured модификатор, который меняет внешний вид блока целиком в особом случае.
Такая система сразу даёт понять из одного только названия класса, к какому компоненту он относится и какую роль играет внутри него, без необходимости заглядывать в разметку и разбираться во вложенности, чтобы понять связь между элементами.
Плоская структура классов БЭМ, где элемент не наследуется от родителя через дополнительную вложенность, а называется полностью явно, облегчает и переиспользование — компонент card__title можно перенести в другой блок без риска, что стили потянутся откуда-то из родительской иерархии по CSS-каскаду.
Существуют и другие подходы, вроде атомарного CSS, где классы описывают не компонент, а конкретное свойство — например, отдельный класс на отступ, отдельный на цвет текста. У этого подхода свои сильные стороны, особенно в больших проектах, но он требует другой привычки мышления при вёрстке.
Единого правильного подхода на все случаи не существует — важно скорее придерживаться какой-то системы последовательно на протяжении всего проекта, чем метаться между разными принципами именования от страницы к странице внутри одного сайта.
Подробное описание методологии с примерами доступно на странице о соглашении именования БЭМ.
