Команды, которые внедрили @layer для дизайн-системы, маркетинговых оверрайдов и сторонних виджетов, заметили, как одна неслойная утилита «крадёт» цвета заголовков в Safari, тогда как Chrome выглядит идеально. В 2026 году каскад — это уже не только «у кого выше специфичность»: порядок слоёв, происхождение, важность и сам факт участия декларации в слое определяют победителя. Здесь — кому нужны явные слои, как !important переворачивает колоду внутри одного происхождения, где WebKit всё ещё удивляет, и как прогонять один и тот же бандл на арендованном посуточно Apple Silicon Mac mini, чтобы регрессии не зависели от ноутбука одного инженера.
Дополнительно полезны смежные темы: mix-blend-mode и композитор и Speculation Rules для статических MPA, чтобы навигация, отрисовка и политика каскада совпадали.
Кому на самом деле нужен @layer
Если вы отдаёте один рукописный стиль меньше 40 КБ gzip без встраиваний, слои могут быть лишним шумом. Как только сливаются файл токенов, библиотека компонентов, маркетинговые оверрайды и чат-виджет с инлайн-<style>, нужен предсказуемый порядок. Слои кодируют его без раздувания счётчиков специфичности до тройных ID. Они документируют намерение: @layer tokens, base, components, utilities, overrides; читается как архитектура, а не племенные знания в комментариях.
Команды, мигрирующие с BEM-утилит, не должны воспроизводить старые войны специфичности внутри слоёв: слои решают порядок источников между областями, а не микропобеду двух классов, которые проще переименовать.
Порядок слоёв и неслойные декларации
Модель каскада уровня 4 переплетает слойные и неслойные стили: для обычных деклараций одного происхождения все слойные правила (в порядке слоёв) разрешаются раньше любых неслойных, независимо от специфичности. Аккуратная дизайн-система может проиграть голому .page { color: hotpink } в конце main.css. Перенесите правило в @layer overrides или примите неслойный CSS как «супер-оверрайд» и зафиксируйте политику в README, чтобы подрядчики не «просто дописали фикс» вне слоёв.
При равенстве двух селекторов внутри одного слоя специфичность работает как раньше. Слои сбрасывают гонку специфичности только на границах слоёв — не внутри них.
Шахматная доска !important
!important переворачивает порядок внутри того же происхождения: слойный important часто сильнее неслойного important — это удивляет тех, кто помнит миф «important бьёт всё». Для цвета, отступов и типографики именно взаимодействие important и слоёв ломает тёмную тему, когда один файл помечает переменные important в @layer theme, а другой — отзывчивые оверрайды important вне любого слоя.
Практическое правило: держите плотность !important ниже одного вхождения на тысячу деклараций в статических бандлах; выше — планируйте спринт рефакторинга. Автолинт может подсвечивать пары !important + @layer после сборки Tailwind или Lightning CSS.
Фреймворки и токены
Preflight в духе Tailwind v4 часто слойный; сторонние библиотеки при двойном бандлинге могут попадать в анонимные слои. Дублирующиеся имена @layer сливаются — хорошо —, но анонимные слои разных вендоров могут переупорядочиваться в зависимости от нарезки чанков. Зафиксируйте импорты vendor в одном entry и запретите тихий динамический import() CSS из маркетинговых тегов, если файлы не объявляют явные имена слоёв.
Для Vite и чистого HTML положите верхний layers.css только с объявлениями @layer в нужном порядке, затем импортируйте vendor с @import в слоях. Бюджет gzip основного CSS — ниже 120 КБ, чтобы мобильный Safari успел распарсить в первом окне взаимодействия.
Различия Safari WebKit и Chrome
Начало 2026: Chromium и WebKit реализуют слои каскада для обычных правил, но расходятся вокруг @scope, хуков Shadow DOM и constructed stylesheets из расширений. Safari Technology Preview обычно на одну–две версии впереди стабильного Safari; если аудитория — корпоративный macOS на N-1, тестируйте стабильный Safari, а не только STP. Chrome Canary ловит баги порядка CSS + import map, которые проявляются только с modulepreload.
Различаются и @font-face: если @layer base задаёт font-display: swap, а неслойный маркетинговый CSS — optional, победитель следует правилам слоёв, что может сдвинуть CLS между браузерами при одинаковых скриншотах.
@import, слои и ловушки производительности
Декларативные @import внутри слойных файлов по-прежнему блокируют рендер, пока цепочка не разрешится. Для статики с первым paint ниже 200 мс лучше инлайнить CSS бандлером с явными @layer, чем грузить импорты в рантайме. Если импорт необходим, ставьте @import в самый верх первого CSS-файла и никогда после правил — Safari отбрасывает середине файла без стабильного лога в встроенных webview.
HTTP/2 multiplexing не убирает стоимость токенизации: WebKit читает каждый байт до применения слоёв. Вынос токенов в критический файл 12 КБ и отложенная загрузка остального через паттерн media="print" со swap остаются валидными при слоях, если задокументировано, какой слой получает каждый отложенный файл.
Контейнерные запросы и слои
Когда правила @container оборачивают слойные селекторы, специфичность считается для вложенного селектора, но принадлежность к слою по-прежнему решает споры между файлами. Частая ошибка — случайно вложить @layer utilities в @layer components при копипасте; бандлеры схлопывают по-разному. Ищите в собранном CSS дубли @layer utilities; больше двух вхождений обычно означает ошибку слияния.
Матрица решений
| Симптом | Вероятная причина | Первый фикс |
|---|---|---|
| Chrome ок, Safari с цветами | Неслойный vendor после слойных токенов | Перенести импорт vendor в @layer components |
| Тёмные переменные не применяются | Important вне слоёв бьёт слойный important | Нормализовать important в @layer theme |
| Дрожащий порядок после code split | Анонимные слои в ленивых чанках | Явно именовать слои на чанк |
| Утилиты не перебивают компоненты | В списке слоёв utilities раньше components | Переупорядочить декларацию или файлы |
Рабочий процесс на арендованном macOS
- Соберите продакшен-CSS с хешем в имени; запишите первые 8 hex-символов SHA-256 в тикет.
- Откройте статический HTML-бандл в стабильном Safari без кэша; полноэкранные скриншоты на ширинах 375, 768 и 1280 px.
- Повторите в Chrome с теми же ширинами; сравните в инструменте, терпимом к растеризации шрифтов.
- Запустите панель Timelines WebKit на три секунды после загрузки, чтобы поймать поздние инъекции стилей.
- Архивируйте артефакты в
/docs/visualс хешем CSS в имени файла.
Делать это на выделенном Mac mini избавляет от сна ноутбука, split-VPN и GPU-вариаций «у меня работает». MacHTML сдаёт Apple Silicon mini примерно за 16,9 $ в день — дешевле одного ускользнувшего бага каскада в проде.
FAQ
Всегда ли неслойные стили сильнее слойных?
При обычной специфичности да — неслойное побеждает слойное при совпадении происхождения.
Как ведёт себя !important?
Important переворачивает порядок внутри происхождения; слойный important сильнее неслойного important.
Нужен ли маркетингу отдельный слой?
Да — назовите overrides или campaign и опишите, кто может править.
Почему не только Linux CI?
На Linux нет точной растеризации текста WebKit и системных фоллбэков шрифтов; macOS ближе к реальным пользователям.
Mac mini на Apple Silicon остаются тихими под параллельными браузерами, дают нативный WebKit и тепловой запас настольных QA-машин без покупки железа, которое простаивает одиннадцать месяцев в году. Аренда через MacHTML даёт SSH и опциональный VNC, чтобы дизайн и разработка согласовывали фиксы каскада рядом. Когда релизный поезд ушёл — остановите инстанс: ёмкость следует календарю, а не капекс-таблицам.
Тихие вентиляторы важны для записи демо стейкхолдерам; никто не хочет шум турбины поверх объяснения порядка @layer.
Прогон @layer на реальном WebKit macOS
Арендуйте облачный Mac mini, сравните Safari и Chrome на идентичных CSS-бандлах, сохраните скриншоты и поставьте статический HTML с уверенностью.