Новая модульная система в CSS

В предыдущем посте мы рассмотрели проблему модульности в CSS. К счастью, в современном CSS появилась новая команда @scope, с помощью которой можно сделать настоящие модули. Эта команда позволяет написать селектор, который стилизует от заданного родительского класса до заданного дочернего. Ее синтаксис выглядит так:
@scope (селектор1) to (селектор2) {
.elem {
color: red;
}
}

Давайте решим с ее помощью задачу из предыдущего поста. Для этого нам также придется ввести соглашение, но более простое чем в БЭМ. Мы скажем, что все теги, которые должны быть модулями,
будут иметь класс block:
<div class="block parent">
<span class="elem">+++</span>

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

Давайте теперь сделаем так, чтобы стили, заданные для класса block, не распространялись внутри дочерних классов блок. Говоря другими словами, сделаем так, чтобы мы могли стилизовать elem из родителя, не зацепив elem и дочернего блока. Используем команду @scope:
@scope (.parent.block) to (.block) {
.elem {
color: red;
}
}

Что дает новая блочная система? Если вы знаете БЭМ, то в ней есть также соглашение на то, что мы среди всех богатых возможностей CSS будем использовать только классы. Это сделано для того, чтобы костыль с соглашениями имен не сломался. Но в модулях через @scope мы можем делать любые селекторы! Давайте посмотрим на примере. Пусть у нас есть обычные абзацы как в родителе, так и дочернем блоке:
<div class="block parent">
<p>
+++
</p>
<p>
+++
</p>

<div class="block child">
<p>
---
</p>
<p>
---
</p>
</div>
</div>

Стилизуем абзацы из родительского блока, не захватив абзацы из дочернего:
@scope (.parent.block) to (.block) {
p {
color: red;
}
}