А что в таком случае: (см. pageC)
```

<div class="page-a">
  <div class="component-a component-a_special"></div>
</div>

<div class="page-b">
  <div class="component-a"></div>
</div>

<div class="page-c">
  <button class="button">
       <div class="component-a component-a__???"></div>
  </button>
</div>

```

1) у модификаторов  одно подчёркивание
2) а что там за модификация?

Т.е. в кнопке (в любой) стили для ComponentA будут тоже менятся.

.button {
     .component-a {
          font-weight: 700;
          ...
          .component-a__title {
                color: orange;
         }
     }
}

Вот сейчас примерно так все выглядит

Хочу перевести на бэм

если модификации группируются, что лучше использовать именование вида «ключ-значение»:

.component-a {
  font-weight: 500;
}

.component-a_emphasis_light {
  font-weight: 600;
}

.component-a_emphasis_strong {
  font-weight: 700;
  font-size: 1.2;
}

.component-a_emphasis_super-strong {
  font-weight: 900;
  font-size: 1.5;
  color: red;
}

В другом месте например будет так:

.page-a {
     .button {
           ...
           .component-a {
                ...
                .component-a__title {
                      ...
                }
           }
    }
}

.page-a {
     .button {
           ...
           .component-a {
                ...
                .component-a__title {
                      ...
                }
           }
    }
}

Не будет. Оно уже и так есть, просто столкнусь с этим чуть позже.

Там просто модификаторов не хватит =) Но я так понял другого пути нет, нужно все через модификаторы?

.page-a {
     .button {
           ...
           .component-a {
                ...
                .component-a__title {
                      ...
                }
           }
    }
}

В общем случае наследование это очень плохо, модификаторы гораздо лучше

Зависит от задач. Не стоит заводить модификатор под каждое CSS-свойство. Модификатор позволяет выразить состояние сущности (блока или элемента) через название (какие там будут CSS-значения — не столь важно). Если вы смогли придумать компонент, у которого много состояний, вы так и так будете хранить где-то его возможные модификации (или бинарно, или переменными или ещё как-то),просто модификторы позволяют это выразить разово и избежать дублирования и каскада, уменьшая связанность.

То есть так лучше не делать:

.button_color_red {}
.button_color_orange {}
.button_font_14 {}
.button_font_18 {}

А вот так вполне хорошо:

.button {
  background: #eee;
  color: #969;
  padding: 1em;
}

.button_state_success {
  background: green;
  color: white;
}

.button_state_error {
  background: red;
  color: black;
}

.button_size_m {
  font-size: 14px;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.button_size_l {
  font-size: 16px;
  padding: 1.3em 1.1em;
}

Что если кнопка не оторажает состяние, а дизайнер меняет только шрифт и цвет? Могу ли я в таком случае все сделать так:
.component-a_red {color: red}
.component-a_blue {color: blue}
.component-a_small {font-size: 14px}
.component-a_big {font-size: 20px}

Да, если нет логической связи между внешним видом и состоянием, то это единственный вариант, наверное.

Но у вашего варианта есть существенный минус: он допускаем, что может быть такой компонент:

<div class="component-a_red component-a_blue component-a_small component-a_big"></div>

А это абсурдно.

Проблема этого подхода может быть в том, что если red поменяется на yellow, то название класса приедтся менять по всему хтмл

Ну да эти проблемы в приципе очевидны, но как по-другому сделать я просто не представляю

мой пример решится, если вы сгруппируете свойства, например:

component-a_size_* component-a_color_*

Вот как пример чуть выше привел, 3 страницы, каждой странице размер шрифта может разный, как и цвет