Глубокий CSS
Цикл про язык стилей всерьёз: каскад и специфичность, селекторы, блочная модель, поток и позиционирование, flexbox и grid, единицы с clamp и визуальные эффекты.
CSS считают «простым» ровно до первого столкновения: стиль не применяется, margin куда-то исчез, sticky не липнет, z-index: 9999 не помогает. Все эти загадки — не баги, а правила, которых вы пока не знаете. Этот цикл — про правила: десять статей о том, почему CSS ведёт себя именно так.
Десять статей идут по порядку — каждая опирается на предыдущие:
- Основы CSS — синтаксис правила, подключение стилей, классы и DevTools.
- Каскад, специфичность и наследование — как браузер выбирает победителя из конфликтующих правил.
- Селекторы — комбинаторы, nth-child, ::before/::after и современные :is/:where/:has.
- Блочная модель — box-sizing, схлопывание отступов, border-radius и box-shadow.
- Поток документа — block/inline, три способа спрятать элемент и наследие float.
- Позиционирование — от relative-якоря до sticky и контекстов наложения z-index.
- Flexbox — оси, justify/align, тройка grow/shrink/basis и min-width: 0.
- Grid — треки и fr, автосетка без медиазапросов, именованные области.
- Единицы и адаптивность — rem против px, вьюпорт-единицы, clamp и медиазапросы.
- Визуальные эффекты — градиенты, object-fit, фильтры, трансформации и каркас анимаций.
Производительность анимаций и организация стилей в React-проекте живут в соседнем разделе — Анимации: CSS и оптимизации и Стили в React-приложении: этот цикл даёт им фундамент.
Цикл входит в программу Frontend фазой перед React: компоненты и дизайн-системы стоят на каскаде, блочной модели и flexbox — без них любая вёрстка остаётся подбором магических свойств.