Модуль 1 · урок 2 з 14
Зайві обгортки
«Div soup» — це коли дерево виглядає так: div > div > div > div > span,
і жоден рівень не пояснює, навіщо він. Виникає це не від дурості, а від звички:
треба відступ — обгорнув, треба вирівняти — ще обгорнув, треба фон — ще один.
Чим це шкодить насправді
- CSS росте швидше за розмітку. Кожна обгортка — це ще один клас і ще одне правило, яке треба тримати в голові.
- Селектори довшають. Замість
.card__titleз'являється.wrap .inner .card .head .title, і специфічність повзе вгору. - Скрінрідер губиться. Він читає ролі, а роль
div— «нічого». - У Angular це множиться. Кожен компонент додає свій хост-елемент, тож зайві рівні з розмітки накладаються на зайві рівні з компонентів.
Чим лікується
| Обгортка з'явилась заради… | Що зробити натомість |
|---|---|
| Відступів між блоками | gap у flex/grid батька — обгортка не потрібна |
| Вирівнювання по центру | Батько стає flex або grid, дитина лишається одна |
| Обмеження ширини | max-width + margin-inline: auto прямо на блоці |
| Фону або рамки | Стилі на самому семантичному тезі, а не на обгортці |
| Групування «щоб зручно було» | Часто це і є справжня <section> — просто назви її правильно |
Практичний тест
Відкрий свій шматок розмітки й спробуй видалити будь-який div. Якщо після цього
нічого не зламалось — він був зайвий. Якщо зламалось лише вирівнювання — швидше за все
його можна замінити на gap або display: grid у батька.