@layer: явный порядок слоёв каскада
Каскадные слои задают порядок групп CSS-правил до сравнения специфичности внутри этих групп. Это помогает отделить базовые стили от компонентов и локальных дополнений.
Назначение
Каскадные слои задают порядок групп CSS-правил до сравнения специфичности внутри этих групп. Это помогает отделить базовые стили от компонентов и локальных дополнений.
Как это работает
Порядок именованных слоёв можно объявить заранее. Для обычных деклараций более поздний слой имеет приоритет над ранним даже при меньшей специфичности селектора. Внутри одного слоя продолжают действовать обычные правила каскада.
Пример
<style>@layer base,components;@layer base{#layer-card{color:#743726}}@layer components{.layer-card{color:#11694e;font-weight:700}}</style>
<p id="layer-card" class="layer-card">Цвет выбирает слой компонентов.</p>Что должно получиться
Абзац становится зелёным: обычное правило из components приоритетнее правила с id из base. Это показывает отличие порядка слоёв от соревнования специфичности отдельных селекторов.
Граница применения и частая ошибка
Обычные правила вне слоёв приоритетнее обычных правил внутри слоёв. Для !important порядок слоёв разворачивается; не переносите на него вывод из примера автоматически. Добавление слоёв к старому проекту требует проверки существующих несгруппированных правил.
Самостоятельная проверка
Поменяйте порядок имён в первом объявлении, затем добавьте обычный color вне всех слоёв. Для каждого состояния объясните результат через порядок каскада, прежде чем увеличивать специфичность.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.