Модификатор у родителя SCSS, BEM?

Question

[Vadimmmmm]

Привет!
Есть такая разметка:

<div className="block">
      <div className="block__element_active">...</div>
      <div className="block__element_hidden">...</div>
</div>

, с такими стилями:

.block {

	&__element {

		&_active {

		}

		&_hidden {

		}
	}
}

Появилась необходимость задавать стили для блока, его элементов и модификаторов в зависимости от платформы (web/mobile).

Разметка стала такой:

<div className="block block_web">
      <div className="block__element_active">...</div>
      <div className="block__element_hidden">...</div>
</div>

и стили соответственно:

.block {

	&_web {

		&__element {

			&_active {
				
			}

			&_hidden {
				
			}
		}
	}
}

но в таком случае ругается линтер, мол селектор не по БЭМу: https://i.imgur.com/HjHIrTs.png

Собственно вопрос - как лучше организовать классы и стили к ним и при этом соответсвовать БЭМ-у?

Comments

[WapSter]

Каждому элементу задаются модификаторы, а не наследование от родителя

[Виталий Першин]

Это неправильно:

<div className="block">
      <div className="block__element_active">...</div>
      <div className="block__element_hidden">...</div>
</div>

Вы используете модификатор как элемент, должно быть так:

<div className="block">
      <div className="block__element block__element_active">...</div>
      <div className="block__element block__element_hidden">...</div>
</div>

Хотя и это не совсем верно, так как при таком подходе допускается одновременное использование и _active и _hidden, поэтому еще более правильно вот так:

<div className="block">
      <div className="block__element block__element_state_active">...</div>
      <div className="block__element block__element_state_hidden">...</div>
</div>
</code

Answer 1

[Валерий]

Как вариант использовать микс в селекторе
class=“block block-web”

Answer 2

[Сергей delphinpro]

ругается линтер, мол селектор не по БЭМу:

Разумеется. Вы посмотрите что там в итоге-то получается...
Вот так следует записать:

.block {
  &_web &__element {
      &_active {  }
      &_hidden {  }
  }
}