CSS-слои: как навести порядок в стилях

Вы когда-нибудь тратили часы на поиск CSS-правила, которое перебивает все ваши старания? Знакомо? Тогда давайте поговорим о CSS-слоях — инструменте, который меняет правила игры.
Что такое каскадные слои?
Директива @layer позволяет группировать стили и управлять порядком их применения. Представьте, что ваш CSS-код — это многоэтажка. Раньше все правила жили в одной коммунальной квартире. Слои же расселяют их по разным этажам с чёткой иерархией: кто главнее, а кто подчиняется.
Где слои реально выручают?
• Сброс браузерных стилей — поместите reset в отдельный слой, и он не перебьёт ваши стили.
• Работа с фреймворками — положите Bootstrap в слой, а свои стили — в другой, и забудьте о !important.
• Компонентный подход — группируйте стили для кнопок, карточек, модалок.
• Состояния элементов — храните :hover, :focus, :disabled в одном месте.
Как объявлять слои в CSS?
Именованный слой:
@layer buttons {
  .btn { padding: 10px; }
  .btn-primary { background: blue; }
}
Перечисление слоёв заранее:
@layer reset, framework, components;
/* Где-то дальше */
@layer components { .header { ... } }
Анонимный слой:
@layer {
  * { box-sizing: border-box; }
}
Вложенные слои:
@layer theme {
  @layer colors { --primary: blue; }
  @layer typography { body { font-family: Arial; } }
}
Обращение через точку: theme.colors.
Главный секрет: кто побеждает?
1. Порядок слоёв. Слой, объявленный позже, побеждает ранний:
@layer base { button { background: gray; } } /* проиграет */
@layer theme { button { background: blue; } } /* победит */
2. Стили вне слоёв — короли. Любое правило не в слое всегда побеждает:
button { background: green; } /* победит */
@layer theme { button { background: blue; } } /* проиграет */
3. !important переворачивает всё. Ранние слои с !important побеждают поздние.
Советы новичкам
1. Начинайте с малого — вынесите в слои сброс стилей.
2. Называйте понятно: reset, base, components, utilities.
3. Порядок определяйте в начале файла.
4. Проверяйте в инструментах разработчика — видно, из какого слоя правило.
Главное запомнить:
• @layer даёт контроль над порядком стилей;
• поздние слои побеждают ранние;
• стили вне слоёв всегда важнее;
• !important в слоях работает наоборот;
• идеально для работы с библиотеками.
Попробуйте @layer в следующем проекте — CSS станет чище и предсказуемее.