@layer

`@layer` добавляет явный шаг упорядочивания до specificity. Один раз объявите глобальный порядок, затем относите правила к reset, base, components, utilities и overrides.

					@layer reset, base, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}
@layer components {
  .btn { padding: 0.5rem 1rem; }
}
@layer utilities {
  .hidden { display: none !important; }
}

/* Unlayered author styles сильнее всех layered normal styles */
.alert { border: 2px solid red; }
				

Utilities с низкой specificity в позднем layer могут побеждать component rules с высокой — намеренно. Unlayered стили сильнее layered normal rules — сюрприз при миграции.

На интервью: чем layers отличаются от source order и почему снижают эскалацию specificity.

Компромисс: явный governance layers против сюрпризов, когда unlayered стили сильнее layered rules.

Типовые ошибки: случайные имена layers без governance; новый код unlayered при внедрении.

Чеклист:

• Порядок layers в точке входа.
• Reset и utilities — осознанно.
• Правила precedence для unlayered.
• Политика override и !important.