допустим, я сделал, как вы написали:
.calculator {}
.calculator_theme_material {}
.calculator .button {}
.calculator_theme_material .button {}
А потом подключил на страницу какую-нибудь стороннюю тему, которой тоже нравится замечательное .button, и она его использует. В итоге моя кнопка рухнула, либо мне надо переопределять ВСЕ стили, которые объявляются в .button в сторонней теме.
-------
в БЭМ у нас компоненты (блоки), которые удобно использовать и удобно
переиспользовать; это улучшает восприятие проекта; это удобно в сочетании с современными фреймворками типа React'а;
Глядя на БЭМ блок, я сразу вижу, что эта кнопка относится к блоку, я знаю, где она будет в стилях, я знаю, что ее не будут аффектить какие-то лишние глобальные/сторонние стили.
Это просто удобно, в конце концов, а вот ваш яростный хэйт выглядит странно. )