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

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

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

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

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

Один тег img и одно свойство object-fit решают большинство задач с картинками на сайте. Разбираем, что вписать в разметку и стили, чтобы изображения не растягивались и не тормозили загрузку.

Как собрать маркированный, нумерованный и вложенный список, убрать точки для меню и не сломать разметку. Пошагово, с проверкой на каждом шаге.

Почему таблица ломает мобильную вёрстку, не держит sticky-заголовок и растягивает страницу горизонтально — и как это чинить без хаков.

За полчаса соберём три рабочих кнопки: обычную, кнопку-ссылку и disabled-состояние. Разберём, чем button отличается от div, и как не сломать доступность.

Пять способов задать один и тот же цвет в CSS дают разный результат при наведении, в тёмной теме и при расчёте контраста. Разбираем, какой формат выбрать под задачу.

Подключение шрифтов кажется парой строк CSS, пока текст не мигает при загрузке или сайт не тормозит из-за пяти начертаний. Разбираем, как подключить шрифт правильно и что настроить с первого раза.

Иконочный шрифт грузит один файл на весь набор иконок, но ломается на кешах, скринридерах и рендеринге. Разбираем, где иконочные шрифты проигрывают SVG и когда переход себя не оправдывает.

Разберём, чем margin отличается от padding, почему два соседних отступа схлопываются в один и как сделать одинаковые интервалы между блоками. К концу вы сможете расставить отступы осознанно, а не подбором цифр.