Проблемы модульности в CSS

В современной верстке принято разбивать части сайта на независимые модули. Но есть проблема: обычный CSS это не поддерживает. Сейчас я покажу на примере. Пусть у нас есть следующая верстка:
<div class="parent">
<span class="elem">+++</span>

<div class="child">
<span class="elem">---</span>
</div>
</div>

Пусть я хочу, чтобы у меня был блок parent и блок child. Эти блоки должны работать независимо. Это значит, что если я стилизую какой-то элемент из parent, то элемент с таким же именем в блоке child стилизоваться не должен.

Собственно, в этом и проблема. Для примера я специально сделал два элемента с классом elem в обоих наших блоках. Пусть я хочу стилизовать элемент из блока child. Я напишу следующий CSS код:
.parent .elem {
color: red;
}

Этот CSS, однако, зацепит как elem из родительского блока, так и elem из дочернего. Что же с этим делать? Проблему можно решить через соглашения, которые накладываются на имена классов. В данном случае соглашение - это правило, которое мы накладываем на имена наших CSS классов. Мы говорим, что будем следовать этому правилу и не будем его нарушать. Наиболее известным таким соглашением является БЭМ от Яндекс https://ru.bem.info/methodology/.

Перепишем нашу верстку в стиле БЭМ:
<div class="parent">
<span class="parent__elem">+++</span>

<div class="child">
<span class="child__elem">---</span>
</div>
</div>

Стилизуем наш элемент:
.parent__elem {
color: red;
}

Как вы видите, суть соглашения в случае БЭМ - это то, что в имени элемента указывается имя родителя. Это решает описанную выше проблему. Но так как БЭМ это по сути костыль, то проблема решается не очень хорошо. Нам приходится дублировать имена родителя в каждом его элементе. Из-за этого код становится очень многословным и нарушает принцип DRY (https://code.mu/ru/theory/glossary/DRY/).