Перейти к содержимому
Fullstack DevOps — Учебник v2

Обзор раздела — CSS Core: каскад, раскладка, позиционирование, анимации

В краткой версии учебника ты собрал пару страниц на Tailwind: классы flex, justify-center, grid-cols-3 сами раскладывали элементы, а каскад волновал ровно ноль человек. И это правильная стартовая позиция — до тех пор, пока ты не пишешь что-то своё. Но в продакшене CSS-проблемы возвращаются в самой неприятной форме: стили компонента «протекают» наружу, шрифт в одном месте 16px, а в другом — 14px, и никто не знает почему; z-index: 9999 не поднимает дропдаун над модалкой; кнопка внутри карточки сломалась от одного «несвязанного» правила на три экрана выше; анимация дёргается на мобильном, хотя «всё по гайдам».

Этот раздел — про механику, которая стоит за всеми этими симптомами. Каскад, специфичность, бокс-модель, форматирование контекста, оси Flexbox, грид-треки, stacking contexts, compositor-анимации — вот фундамент, на котором стоят и «голый» CSS, и Tailwind, и CSS-in-JS, и любая компонентная библиотека. Ты не сможешь отлаживать чужой фреймворк, не понимая, что он генерирует под капотом. Если нужен один стартовый ресурс на всё сразу — это Learn CSS от web.dev, а систематический справочник по каждому свойству даёт MDN CSS.

Зачем глубокий CSS перед React и Tailwind

Заголовок раздела «Зачем глубокий CSS перед React и Tailwind»

Tailwind — это не «CSS без CSS», это сгенерированный CSS. Класс md:flex — это медиазапрос. flex-1 — это flex: 1 1 0%. z-10 — это z-index: 10. Каждый раз, когда Tailwind-утилита работает не так, как ты ожидал, дебаг идёт в панель DevTools → Styles, где ты видишь обычный CSS, обычный каскад и обычную специфичность. Разработчик, который понимает эти механизмы, чинит «странный» баг за пять минут; не понимающий — крутит классы наугад, пока не «заработает», и оставляет за собой мину, которая взорвётся у следующего.

Кроме того, не всё верстается утилитами: кастомные анимации, сложные раскладки со «слоями», печатные стили, email-вёрстка, iframe-виджеты, style-атрибуты из бэкенда. Всё это — «голый» CSS, где нет mx-auto, который тебя спасёт.

Что внутри раздела

Заголовок раздела «Что внутри раздела»

Раздел идёт от фундамента к практике: сначала правила игры (каскад, специфичность, наследование, бокс-модель), потом инструменты раскладки (Flexbox и Grid), затем вынос элементов из потока и слои (positioning, z-index), в финале — анимации и адаптив.

1. Каскад, специфичность, бокс-модель — фундамент всего. Источники стилей и их приоритеты (user-agent → user → author → inline → !important), система подсчёта специфичности 0-1-0-0, наследование и ключевые слова inherit/initial/unset/revert, бокс-модель content-box против border-box со схемами, display во всех режимах, единицы измерения (px/rem/em/vw/vh/%/ch) с граблями вложенного em, современные цветовые функции и кастомные свойства (--vars) как замена Sass-переменным.

2. Flexbox в деталях — раскладка вдоль двух осей: flex-direction, flex-wrap, gap, justify-content, align-items, align-content — каждое значение с мини-схемой. На айтемах: flex-grow/flex-shrink/flex-basis с формулой перераспределения свободного места, грабля min-width: auto и типовые паттерны: идеальное центрирование, карточки одинаковой высоты, sidebar + main, шапка с лого, sticky-footer.

3. CSS Grid в деталях — терминология (контейнер, айтем, линия, трек, ячейка, область) со схемой, fr и как он считается, repeat(), minmax(), разница auto-fill против auto-fit со схемой-граблёй, grid-template-areas для макета страницы целиком, выравнивание по осям, subgrid, masonry-кратко и паттерны: holy grail, карточная сетка без медиазапросов, форма label + input.

4. Позиционирование и stacking contexts — static/relative/absolute/fixed/sticky: поведение каждого, containing block, грабля «fixed внутри transform вдруг стал absolute-подобным», условия работы sticky, z-index и создание stacking contexts (таблица + схема слоёв), overflow и решение типовых задач: центрирование absolute-элемента, тултип, модалка-оверлей, выпадашка.

5. Анимации и адаптивная вёрстка — transition с кубиками Безье (ASCII-график), transform/opacity против layout-свойств (reflow → repaint → composite, со схемой), @keyframes и все подсвойства animation, will-change и её злоупотребление, обязательный prefers-reduced-motion, медиазапросы: mobile-first против desktop-first, логические операторы, prefers-color-scheme, fluid-типографика через clamp() и container queries.

Как работать с разделом

Заголовок раздела «Как работать с разделом»
  1. Открывай DevTools → Styles на каждом примере. Смотри, какое правило победило, зачёркнутые объявления, computed-значения. Это главное упражнение раздела.
  2. Предсказывай до перезагрузки. Перед каждым экспериментом с раскладкой нарисуй на бумаге, где встанут элементы. Сверь с браузером. Несовпало — разберись, почему.
  3. Пиши руками. В конце каждой главы — «Практика» с заданиями и критериями результата. Делай их в index.html без фреймворков: чистый CSS — лучший способ увидеть механику.

Параллельно с главами пройди обе обучающие игры до конца: Flexbox Froggy — 24 уровня на свойства flex-контейнера и айтемов, и Grid Garden — 28 уровней на grid-колонки и строки. Они закрепляют именно мышечную память синтаксиса, которую мы тут разбираем по косточкам.