Модуль 3 · Урок 10
Cascade, specificity та inheritance
Specificity — не перший і не єдиний крок cascade. Спочатку browser відсіює irrelevant rules, порівнює origin, importance і layer; лише потім selectors у winning context змагаються за specificity, proximity та source order.
Cascade orderID–CLASS–TYPEInheritanceSource order
П’ять запитань до conflict
- Relevance: selector matches, media/supports condition true?
- Origin/importance/layer: яке declaration знаходиться у precedence context?
- Specificity: який weight ID–CLASS–TYPE серед declarations цього context?
- Scoping proximity: чи є competing scoped rules?
- Source order: якщо все інше рівне, яке declaration останнє?
Не починайте з !important
Він змінює importance order і створює дорожчі майбутні overrides. Спочатку поясніть conflict і спростіть selector architecture.
Specificity без міфів
| Selector | Weight | Пояснення |
|---|---|---|
p | 0–0–1 | Один type |
.hero p | 0–1–1 | Class + type |
#main .hero p | 1–1–1 | ID + class + type |
:where(.hero) p | 0–0–1 | :where() має zero specificity |
DOM proximity сама по собі не додає ваги. За рівної specificity і context перемагає later source order.
Inheritance і defaulting
Inherited
color і font properties зазвичай отримують computed value parent, якщо немає direct declaration.Non-inherited
margin, border, background зазвичай беруть initial value.Direct targetDeclaration на child перемагає inherited value незалежно від specificity ancestor.
inheritПримусово бере computed value parent.initialПовертає property initial value, не browser default element style.unsetПрацює як inherit для inherited і initial для non-inherited property.Практика
- Заповніть
cascade-trace.csvдля hero text, featured card і button link. - Запишіть усі candidate declarations до зміни source.
- Приберіть ID escalation і досягніть predictable override класами/порядком.
- Перевірте inherited color окремо від direct link color.
Офіційні джерела
Практична перевірка · урок 10 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.