🎯 CSS @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/