Урок 22. Старый vs Новый: сколько кода мы не написали

📁 Раздел: Итоговый проект ⏱️ Время изучения: ~3–4 часа 🎯 Сложность: Продвинутая

⚡ Кратко

Тот же дашборд «по-старому» — это отдельный CSS-файл на несколько сотен строк, свои модальные окна и ручная тёмная тема. Сравним объём работы.

Что пришлось бы написать без Tailwind и компонентов

Часть	Раньше	Сейчас
Каркас	CSS-файл с медиазапросами	одна строка классов Grid
Карточка	класс + модификаторы	`<Card>`
Таблица	стили для th/td/зебры/наведения	`<Table>`
Меню действий	JS: открытие, закрытие по клику вне, стрелки	`<DropdownMenu>`
Модальное окно	JS: фокус, Esc, прокрутка, ARIA	`<Dialog>`
Тёмная тема	второй набор правил	переменные темы
Скелетоны	свои ключевые кадры	`animate-pulse`

Раскладка каркаса

❌ Было

.layout { display: flex; min-height: 100vh; }
.sidebar { width: 256px; flex: none; }
.content { flex: 1; min-width: 0; }
.header { height: 56px; display: flex; align-items: center; }

@media (max-width: 1024px) {
  .sidebar { position: fixed; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.is-open { transform: none; }
}

Плюс JavaScript, который добавляет и убирает is-open, закрывает панель по клику вне и блокирует прокрутку.

✅ Стало

<div className="grid min-h-svh grid-rows-[auto_1fr] lg:grid-cols-[16rem_1fr]">
  <AppSidebar className="hidden lg:col-start-1 lg:row-span-2 lg:block" />
  {/* на мобильном тот же сайдбар открывается в Sheet */}
</div>

Что осталось вашей работой

Инструменты не отменяют инженерных решений. Вам по-прежнему нужно:

придумать иерархию: что на экране главное;
спроектировать состояния данных;
решить, что показывать на мобильном, а что прятать;
проверить доступность и контраст;
договориться о шкале слоёв и токенах в команде.

Именно поэтому курс начинался не с shadcn/ui, а с утилит, сетки и типографики: библиотека компонентов ускоряет работу, но не думает за вас.