Обзор раздела: CSS-фреймворки и инструменты
В краткой версии учебника ты взял Tailwind, собрал на нём пару экранов и пошёл дальше. Это правильный путь для старта, но в реальной команде вопрос «чем стилизуем?» решается не вкусом, а контекстом: legacy-проект на Sass, админка «на вчера», дизайн-система с брендом, enterprise с формами и таблицами на тысячи строк. У каждого сценария — свой правильный инструмент, и инженер, который их различает, экономит команде недели.
Этот раздел — карта экосистемы CSS-инструментов 2026 года. Мы идём по исторической оси, и она совпадает с осью «от компиляции к рантайму и обратно к компиляции»: препроцессоры, которые расширяли язык, потому что сам CSS был беден; utility-first, который заменил семантические классы на атомарные утилиты; CSS-in-JS, который принёс стили в JavaScript и заплатил за это рантаймом; компонентные библиотеки, которые упаковали всё это в готовые UI-кирпичи. Понимание этой оси — ключ к собеседованиям и к архитектурным решениям.
Важно сразу обозначить границы. Глубокий Tailwind, Radix и Shadcn уже разобраны в разделе Стили, a11y, Performance — там же лежат CSS Modules, современный CSS и производительность. Здесь мы намеренно не дублируем их, а закрываем всё остальное: что стоит за этими инструментами и какие альтернативы живут рядом.
Карта раздела
Заголовок раздела «Карта раздела»Точка входа в историю. Разбираем, зачем вообще появились Sass/SCSS: переменные до CSS Custom Properties, миксины, партиалы, операторы. Честно смотрим, что из этого в 2026 году делает нативный CSS (вложенность, custom properties, @layer), а что по-прежнему удобнее в Sass. Отдельно — PostCSS: это не препроцессор, а трансформатор, и именно через него в проект попадают autoprefixer, cssnano и будущий синтаксис CSS через preset-env.
Bootstrap — не «фреймворк для новичков», а феномен, который десять лет задавал дефолт веба. Разбираем его изнутри: сетку с контейнерами и breakpoints, конвенции именования утилит, компоненты на data-атрибутах, кастомизацию через Sass-переменные и color modes. И главное — когда Bootstrap в 2026 году правильный выбор (внутренние админки, прототипы), а когда — красный флаг.
Tailwind не одинок. UnoCSS пересобирает утилитарный подход с нуля: on-demand генерация, пресеты, attributify-режим. daisyUI добавляет поверх Tailwind готовые темизируемые компоненты. Плюс короткие истории Tachyons (прадед жанра), WindiCSS (предостережение) и гибридные схемы вроде Tailwind + headless-библиотеки.
Глава-разбор: что CSS-in-JS решал в 2016-м, как устроены styled-components и Emotion внутри, как Linaria и vanilla-extract вернули стили на этап сборки с типизацией, и почему вместе с приходом Server Components вся категория пошла на спад. Честный разбор без ностальгии: где CSS-in-JS всё ещё уместен, а где сегодня брать его нельзя.
Компонентные библиотеки: MUI, Chakra, Mantine
Заголовок раздела «Компонентные библиотеки: MUI, Chakra, Mantine»Верхний слой пирамиды: готовые компоненты React. Сравниваем Material UI, Chakra UI, Mantine и Ant Design по системам темизации, весу, доступности и кривой кастомизации. Отдельно — огромная сравнительная таблица и критерии выбора: pet-проект, стартап с брендом, enterprise. Завершает главу антипаттерн «смешал две библиотеки» и его цена.
Как выбирать инструмент
Заголовок раздела «Как выбирать инструмент»Сквозная логика раздела — не «какой фреймворк лучший», а четыре вопроса:
- Кто владеет дизайном? Свой бренд и дизайн-система → utility-first или headless-примитивы. Нет дизайнера и нужно быстро → Bootstrap или готовая библиотека компонентов.
- Где работают стили: сборка или рантайм? Рантайм-стилизация (CSS-in-JS классический) сегодня несёт прямой cost на гидратацию и INP — метрики из Core Web Vitals.
- Какой у проекта бюджет размера и какое дерево зависимостей? Каждая библиотека — это килобайты CSS и JS, и их считают в бюджет.
- Кто будет поддерживать через два года? Экзотика дешевле сегодня и дороже при найме.
Связь с pet-проектом и разделом 05
Заголовок раздела «Связь с pet-проектом и разделом 05»В pet-проекте из этого учебника (лендинг + дашборд) ты успеешь попробовать три подхода из четырёх: дашборд соберёшь на Bootstrap или Mantine ради скорости, лендинг — на Tailwind с токенами из раздела 05, а в главе про CSS-in-JS осознанно напишешь одну страницу styled-components и измеришь разницу в гидратации сам. Раздел 05 подхватывает тему с другого конца: там — как устроены Tailwind и Radix и как стили влияют на метрики, здесь — что ещё есть в экосистеме и как это всё выбирать.
Порядок чтения
Заголовок раздела «Порядок чтения»Главы независимы: можно читать в любом порядке, от прикладного (компонентные библиотеки) к фундаментальному (препроцессоры). Но рекомендую идти как написано — историческая ось помогает понять, почему каждый следующий подход появился именно таким.