Cascade

Cascade выбирает одно победившее declaration, когда несколько правил нацелены на одно свойство. Порядок разрешения важен: сначала origin и importance, затем cascade layer, specificity, scoping proximity и source order.

| Шаг | Что побеждает | |-----|---------------| | 1 | Origin (user agent < author < user) | | 2 | Importance (`!important` внутри origin) | | 3 | Cascade layer (порядок @layer) | | 4 | Specificity | | 5 | Source order (позже — сильнее) |

					@layer reset, components, utilities;

@layer components {
  .card { padding: 1rem; }
}
@layer utilities {
  .p-0 { padding: 0 !important; } /* layer + important побеждает обычное правило компонента */
}
				

На интервью: объясните, почему стиль не применяется, пройдя шаги cascade — а не добавляя селекторы.

Типовые ошибки: эскалация specificity скрывает проблему владения; `!important` как постоянный костыль; unlayered стили сильнее layered normal rules при миграции.

Компромисс: быстрые фиксы против предсказуемой архитектуры — layers и локальное владение снижают конфликт лучше, чем тяжёлые селекторы.

Чеклист:

• Сначала origin и importance.
• Сравните layer order до specificity.
• Архитектура с меньшим конфликтом важнее override wars.
• Документируйте, где utilities могут использовать !important.