Модуль 3 · Урок 9
CSS rules, selectors і DevTools evidence
CSS не «фарбує HTML магічно»: browser завантажує stylesheet, парсить rules, зіставляє selectors із elements і обчислює values. Надійний debug починається з evidence — network status, matched rules і Computed panel.
StylesheetSelectorsDeclarationsComputed
Від link до applied declaration
<link rel="stylesheet" href="styles.css">
.card {
padding: 1.25rem;
border: 1px solid #cbd7e8;
}- Network підтверджує HTTP 200 і CSS content type.
- Parser відкидає invalid declarations, але продовжує обробляти rule.
- Selector
.cardмає match elements. - Cascade обирає declaration для кожної property.
- Computed показує використане значення після defaulting та inheritance.
Selector має описувати стабільний purpose
| Selector | Purpose | Ризик |
|---|---|---|
article | Усі elements цього type | Занадто широкий для component variant |
.card | Reusable component hook | Нечітка назва без design intent |
[aria-current="page"] | Семантичний state | Не дублюйте conflict class без потреби |
.nav a | Descendant у navigation context | DOM coupling при надмірній глибині |
:focus-visible | Keyboard focus state | Не прибирайте outline без replacement |
Evidence-driven debug loop
1 · ReproduceExact URL, viewport, theme і interaction.
2 · InspectStyles: matched, crossed-out, invalid, source location.
3 · ComputeComputed value і Box Model, не лише authored text.
4 · ExplainUnmatched selector, cascade loss, inherited/default value або invalid declaration.
5 · Fix sourceМінімальна зміна в stylesheet.
6 · ReloadNetwork/source і observed effect підтверджені повторно.
Практика
- Запустіть starter page через local HTTP server.
- Заповніть
selector-inventory.csvіз match count та purpose. - Знайдіть одну invalid, одну unmatched і одну overridden declaration.
- Запишіть source location і Computed evidence до checklist.
Офіційні джерела
Практична перевірка · урок 9 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.