Смотри тут нужно подключить логику и правила BEM методологии, по BEM нельзя использовать конструкцию с обращением к span, да и еще учитывая что у вас там есть модефикачия ребенка "feature__color__item_first feature__color__item", сегодня у вас span сегодня а завтра будет div и все приехали))!
По поводу неймина и длинны не переживай это нормально, но стараться нужно писать более логично и с малым набором имен, лучше больше старайся декомпозировать свои компоненты!
Как уже было написано выше у вас не правильный BEM!
component: .feature
block: .feature__color
modeficator: .feature__color--first или .feature__color_first
Вот смотри правильно так:
<div class="feature">
<div class="feature__color feature__color--first">
<mark class="feature__color-item feature__color-item--first"></mark>
<mark class="feature__color-item"></mark>
</div>
<div class="feature__color feature__color--first">
<mark class="feature__color-item feature__color-item--first"></mark>
<mark class="feature__color-item"></mark>
</div>
</div>
или :
<div class="feature">
<div class="feature__color feature__color_first">
<span class="feature__color-item feature__color-item_first"></span>
<span class="feature__color-item"></span>
</div>
</div>
или :
<div class="feature">
<div class="feature-color feature__color_first">
<span class="feature-color__item feature-color__item--first"></span>
<span class="feature-color__item"></span>
</div>
</div>
Если вы уверены что внутри будет один блок то в виде исключения можно написать так(но я не рекомендую так как это нарушает BEM):
<div class="feature">
<div class=feature__color"">
<div class="feature-color-item ">
<h2>first text</h2>
<mark>second text</mark>
last text
</div>
<div class="feature-color-item feature-color-item--fietst ">
last text
</div>
</div>
<style>
.feature-color-item {
font-size: 20px;
h1 {
font-size: 30px;
}
span {
font-size: 10px;
}
}
</style>
</div>
Если вы используете современный фреймворк, то тогда за счет инкапсуляции можно сократить нейминг, вот на примере ануглар:
<feature>
<atricle class="__color">
<div class="__item"><span>text</span></div>
<div class="__item"><span>text</span></div>
<div class="__item"><span>text</span></div>
</atricle>
</feature>
или :
<feature>
<atricle class="--first">
<feature-color-item >
<h2 class="__title">first text</h2>
<mark class="__mark">second text</mark>
last text
</feature-color-item>
<feature-color-item class="--first">
<h2 class="__title">first text</h2>
<mark class="__mark">second text</mark>
last text
</feature-color-item>
</atricle>
<style>
/* componet feature-color-item */
:host {
font-size: 20px;
.__title {
font-size: 30px;
}
.__mark {
font-size: 10px;
}
&.--first{
color: #red;
}
}
</style>
</feature>
