Как правильно задавать класс активным элементам в БЭМ?

Question

[Rufix]

Подскажите верное решение.
Имеется такой блок кода:

<div class="steps-list">
			<div class="steps-item">
				<span class="steps-item__index">01</span>
				<h4 class="steps-item__title">Research</h6>
				<p class="steps-item__text">Текст1</p>
			</div>
			<div class="steps-item">
				<span class="steps-item__index">02</span>
				<h4 class="steps-item__title">Marketing</h6>
				<p class="steps-item__text">Текст2</p>
			</div>
			<div class="steps-item">
				<span class="steps-item__index">03</span>
				<h4 class="steps-item__title">Results</h6>
				<p class="steps-item__text">Текст 3</p>
			</div>
		</div>

Теперь мне нужно сделать стили для активного блока. У этого блока будет другой цвет фона, цвет шрифтов. Тогда мне нужно сделать так?:

<div class="steps-item__active">
	<span class="steps-item__index__active">03</span>
	<h4 class="steps-item__title__active">Results</h6>
	<p class="steps-item__text__active">Текст 3</p>
</div>

Answer 1

[Mikhail Osher]

Кто становится активным? Блок или какой-то элемент отдельно?
Подозреваю, что блок. Так и вешайте только на блок.

.steps-item--active {
  .steps-item__index {
    // another color
  }
}

Comments

[Rufix]

А к элементам этого блока как обращаться?
Так? :

.steps-item--active > .steps-item__index {
	color:  #000;
}

И еще вопрос: для активных блоков класс задается через "--" ? Я просто этого нигде не находил

[Mikhail Osher]

Rufix, только без ">". Не делайте из BEM RSCSS))

[Mikhail Osher]

Rufix, конкретно, какие разделители использовать для блоков/элементов/модификаторов - каждый решает сам. Главное, соблюдать принципы BEM.

Я пишу на React следующим образом, чтобы с компонентом 1:1 было
.Block
.ComplexBlock
.Block__Elem
.CustomBlock__NewElem
.Block--active
.CustomBlock__MyElem--active

Все по-своему пишут. Можете на сайте BEM посмотреть официальные примеры и следовать им, чтобы совесть не мучила

[Rufix]

Mikhail Osher, Хорошо, спасибо. Но у меня еще один вопрос и надеюсь последний.
Необходимо ли дублировать класс для активного блока?
<div class="steps-item steps-item--active">

[Mikhail Osher]

Rufix, да. Советую вдоль и поперёк почитать getbem.com/naming