Антипаттерн 1: анимация геометрии
Из лекции (старое): анимируем width при наведении. Браузер на каждом кадре пересчитывает раскладку (reflow) — анимация дёргается, особенно на слабых устройствах.
📄 lesson-49/problem.css
.card:hover { width: 110%; } /* reflow каждый кадр */Современное: тот же визуальный эффект через transform: scale() — работает на GPU, без reflow.
📄 lesson-49/fixed.css
.card:hover { transform: scale(1.05); } /* только composite */Наведи: плавное масштабирование без reflow
.card { transition: transform 180ms ease; }
.card:hover { transform: scale(1.05); }Антипаттерн 2: картинка без размеров → скачок вёрстки (CLS)
Старое: у img нет width/height. Пока картинка грузится, места под неё нет, а после загрузки контент «прыгает» вниз — растёт CLS.
📄 lesson-49/problem.html
<img src="hero.jpg" alt="...">Современное: задаём размеры (и/или aspect-ratio) — браузер резервирует место заранее, скачка нет.
📄 lesson-49/fixed.html
<img src="hero.webp" width="1200" height="600"
loading="lazy" alt="...">Антипаттерн 3: один гигантский CSS
Старое: один большой неминифицированный styles.css блокирует первый рендер; в нём много неиспользуемых правил.
Современное: Critical CSS первого экрана — инлайн в <head>, остальное минифицировано и очищено PurgeCSS (после проверки, что динамические классы не вырезаны).
📄 terminal
/* npx purgecss --css styles.css --content "**/*.html" -o dist/ */
/* затем минификация: styles.min.css */Осторожно с PurgeCSS: классы, добавляемые из JS динамически, нужно явно внести в safelist — иначе их стили удалятся.