
Критический CSS и отложенная загрузка: чек-лист перед продом
Что проверить в критическом CSS и стратегии отложенной загрузки стилей, прежде чем катить сборку в прод: от FOUC до кеша CDN и мобильного вьюпорта.

Что проверить в критическом CSS и стратегии отложенной загрузки стилей, прежде чем катить сборку в прод: от FOUC до кеша CDN и мобильного вьюпорта.

Google требует зелёные метрики на уровне 75-го перцентиля реальных пользователей. Разбираем, что чинить в LCP, CLS и INP и почему лабораторный тест иногда врёт.

Стили разрослись, любое изменение цепляет соседний блок, а имена классов повторяются в трёх местах. Разбираем BEM, утилитарный подход и CSS Modules — что каждый выигрывает и чем платит.

LCP растёт до 4 секунд, а вы минифицируете CSS и не понимаете, почему ничего не меняется. Разбор того, что действительно двигает метрики загрузки, а что — карго-культ.

Анимация меняет left и margin — и на скролле начинаются рывки, а на мобильном браузер съедает батарею. Разбираем, почему это происходит на уровне рендер-конвейера и как удержать 60 fps.

Utility-классы Tailwind экономят время на типовых интерфейсах, но раздувают разметку и создают дубли на сложных компонентах. Разбираем, где каждый подход выигрывает и чем платит.

Перед выкатом темы на кастомных свойствах стоит проверить каскад, фолбэки, тему по prefers-color-scheme и совместимость с SSR. Разбираем, что ломается чаще всего и как это поймать до пользователя.

Кастомные свойства CSS, Sass-переменные и генераторы токенов решают одну задачу по-разному. Разбираем, что выбрать для тёмной темы, ветвления брендов и синхронизации с дизайном.

Как связать дизайн-токены с CSS custom properties так, чтобы тема переключалась без перезагрузки, а мёртвые значения не размножались по проекту. Разбираем подходы и их цену.

Почему блок вылезает за контейнер, минимальный размер игнорирует ваши проценты, а колонки не выравниваются. Разбираем ошибки вёрстки на Grid и Flexbox и как их чинить.

За полчаса вы соберёте рабочую форму обратной связи: разметка на HTML, проверка полей средствами браузера и аккуратное оформление на CSS. Без JavaScript и без фреймворков.

Ссылка — самый частый элемент на любой странице, но именно на ней ломаются доступность, безопасность и внешний вид. Разбираем, как оформить ссылку правильно и чем платит каждый подход.