Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
Не давай стилям компонента протекать во вложенные компоненты!
Частая проблема большого UI: стилизуем весь контент внутри компонента, а потом эти правила неожиданно задевают другой компонент, вложенный внутрь.
<article class="article">
<p>Текст статьи</p>
<div class="widget"><p>Текст виджета</p></div>
</article>
Обычный селектор по вложенности затронет оба <p>:
.article p {
margin-block: 1em;
}
С @scope можно задать не только начало области, но и место, перед которым действие правил заканчивается.
@scope (.article) to (.widget) {
p { margin-block: 1em; }
}
Первый <p> получит стиль, а <p> внутри .widget — уже нет. .widget здесь является нижней границей scope, поэтому элементы внутри неё исключаются из этой области.
Это особенно удобно для CMS-контента, markdown, rich-text и дизайн-систем, где внутрь одного компонента могут попадать другие независимые компоненты.
И не приходится усложнять селекторы:
.article > p,
.article > section > p {
/* попытка описать структуру DOM */
}
Вместо описания всей структуры мы задаём архитектурную границу:
@scope (.content) to (.component) {
a { text-decoration: underline; }
}
🔥 @scope специально предназначен для ограничения селекторов конкретным DOM-поддеревом без наращивания специфичности и жёсткой привязки CSS к структуре разметки.
📣 Code Ready | #совет
33 · 1.6K ·