Лучше используя тег или такой длинный класс задать стили?

Смотри тут нужно подключить логику и правила 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>