Как отлаживать CSS в DevTools?

Question

Accepted Answer

## Базовый цикл

1. Inspect элемент → смотреть **computed** vs **styles** (зачёркнутое = перебито).
2. Проверить box model: padding/border/margin, `box-sizing`.
3. Включить overlay grid/flex (бейджи в Elements) — оси, gaps, линии треков.
4. Toggle декларации, править на лету, Copy rule.

Временный «кто вылезает»:

```css
* { outline: 1px solid rgba(255, 0, 0, 0.25); }
```

## Типичные охоты

- Специфичность: кто победил — смотрите порядок и источник (user agent / stylesheet / inline).
- Наследование vs non-inherited.
- Overflow: outline на `*` или `*:hover { outline: 1px solid red }` временно.
- Layout shift / paint: Performance/Rendering (paint flashing, layout shift regions).
- `@media` — device toolbar и принудительные media features.

## Совет сеньора

Сначала воспроизведите «кто применился», потом «почему геометрия такая». Не лечите симптом `!important` до понимания каскада.

## Итог

DevTools = каскад + box model + Flex/Grid overlay + media. Умение читать computed важнее заучивания свойств.