CSS Academy · Урок

@scope для изолированных стилей

Ограничивайте область действия правил CSS определёнными поддеревьями с помощью директивы @scope.

«@scope для изолированных стилей» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое @scope?

Правило @scope (Chrome 118+, Safari 17.4+) ограничивает действие правил CSS определённым поддеревом DOM. Правила внутри @scope применяются только к элементам в объявленной области действия, предотвращая утечку стилей между компонентами.

Базовый синтаксис

Объявите область действия с помощью селектора корня области. Все правила внутри применяются только к потомкам соответствующих корней области действия, а не ко всему документу.

<div class="card">
  <div class="title">Scoped Title</div>
  <div class="body">Scoped body text &mdash; styles only apply inside .card.</div>
</div>

Корень области действия

Корень области действия (@scope (.card)) определяет точку входа. Элементы внутри области, соответствующие .title, получают стили. Элементы за пределами .card с классом .title не затрагиваются — это настоящая изоляция стилей без теневого DOM.

Граница области действия

При необходимости задайте границу области действия с помощью to: @scope (.card) to (.nested-card). Правила применяются внутри .card, но останавливаются на потомках .nested-card, ограничивая стили одним уровнем вложенности компонентов и исключая более глубокие экземпляры.

Псевдокласс :scope внутри @scope

Внутри блока @scope псевдокласс :scope обозначает сам элемент — корень области действия. @scope (.card) { :scope { border-radius: 8px; } } применяет стили непосредственно к элементу .card, а не к его потомкам.

Специфичность по близости

@scope вводит специфичность, основанную на близости: если элемент соответствует нескольким областям действия, побеждает ближайший корень области действия среди предков — независимо от специфичности селектора. Это не позволяет стилям глубоко вложенных компонентов быть переопределёнными стилями из удалённых областей действия предков.

@scope и модули CSS

Модули CSS создают уникальные имена классов с хешами, чтобы обеспечить область действия во время сборки — это задача сборщика JavaScript. @scope обеспечивает область действия нативными средствами браузера, без инструментов сборки, имён с хешами или синтаксиса, специфичного для фреймворков, — это чистый CSS.

@scope и теневой DOM

Теневой DOM создаёт полную изоляцию стилей — внешние стили не могут проникнуть внутрь. @scope создаёт частичную изоляцию — стили извне всё ещё могут применяться к элементам в области действия, если их специфичность достаточно высока. @scope — более лёгкая альтернатива для ограничения области действия компонентов без полной изоляции.

Слои с @scope

Сочетайте @scope с @layer для точного управления каскадом: определяйте стили, ограниченные областью действия компонента, в слое компонента. Так можно одновременно управлять порядком каскада (с помощью слоёв) и областью действия стилей (с помощью @scope) удобным для объединения способом, не прибегая к сложным манипуляциям с именами классов.

Практические сценарии использования

Компоненты системы дизайна: ограничьте все стили кнопок областью действия @scope (.button-group), чтобы стили вложенных кнопок никогда не выходили за её пределы. Изоляция виджетов: ограничьте стили стороннего виджета областью его контейнера, предотвращая конфликты с глобальными стилями страницы.

Поддержка браузерами и запасной вариант

@scope поддерживается в Chrome 118 и новее, Safari 17.4 и новее, Firefox 128 и новее. В браузерах без поддержки стили внутри @scope игнорируются — каскад переходит к глобальным стилям. Используйте @scope как прогрессивное улучшение, когда ограничение области действия компонентов полезно, но не критично.

Проверка знаний

Какую проблему решает @scope, которую трудно решить одними традиционными селекторами CSS?

Итоги

@scope ограничивает применение правил CSS объявленным поддеревом DOM, обеспечивая нативную инкапсуляцию стилей без теневого DOM или хеширования имён классов инструментом сборки. Ограничения области действия, специфичность с учётом близости и интеграция с @layer делают @scope мощным примитивом для систем дизайна с областями действия компонентов на чистом CSS.

Часто задаваемые вопросы

Урок «@scope для изолированных стилей» бесплатный?

Да — полный текст урока «@scope для изолированных стилей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «@scope для изолированных стилей»?

Ограничивайте область действия правил CSS определёнными поддеревьями с помощью директивы @scope. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «@scope для изолированных стилей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy