@scope: способ ограничить область действия стилейДо сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть
@scope.Что такое
@scope?@scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM.
@scope (.card) {
h2 {
color: red;
}
}
Этот код применит красный цвет только к
h2, находящимся внутри .card. Всё просто.Почему это важно?
Ограничение области действия стилей:
- делает код изолированным и предсказуемым,
- предотвращает конфликты между компонентами,
- упрощает поддержку и масштабирование CSS.
Более сложный пример
@scope (.card) to (.card-footer) {
a {
text-decoration: none;
}
}
Здесь мы ограничиваем действие от
.card до .card-footer. Стили будут применяться только к a, находящимся между этими двумя элементами в иерархии.Итого
@scope — это шаг вперёд для масштабируемого CSS. Больше не нужно изобретать велосипеды с уникальными классами и перегрузками. Пишите локализованные стили — просто и прозрачно.https://12daysofweb.dev/2023/css-scope/
