Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

@layer в CSS: порядок Bootstrap, утилит и своих стилей

Явные слои `base`, `components`, `utilities` вместо войны `!important`.

Изображение статьи: @layer в CSS: порядок Bootstrap, утилит и своих стилей

Cascade layers (@layer reset, base, components, utilities) задают приоритет групп правил независимо от порядка файлов в бандле.

Удобно при гибриде Tailwind + legacy SCSS: утилиты остаются последним слоем без сотен !important.

- [@layer — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) — Объявление и вложенность слоёв.

- [Cascade layers — web.dev](https://web.dev/articles/css-cascade-layers) — Архитектура стилей.

---

## Миграция

Начните с одного @layer components для UI-kit; reset оставьте вне layer или в самом нижнем.

Документируйте в README, в какой layer добавлять новые блоки лендинга.

#CSS#архитектура#Tailwind

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.