Урок 15. Частые ошибки

📁 Раздел: Организация кода ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя

⚡ Кратко

@apply вместо компонентов, забытый cn(), преждевременные абстракции и «компонент на все случаи жизни».

Ошибка 1. Строить всю систему на @apply

Как ломается: через полгода в проекте файл components.css на тысячу строк, половина классов не используется, и никто не решается их удалить.

Почему: это ровно та проблема, от которой уводит утилитарный подход. Компонент фреймворка удаляется вместе со стилями, CSS-класс — нет.

Ошибка 2. Забыть cn() при приёме className

❌ Конкатенация

<button className={`px-4 py-2 ${className}`} />

✅ Слияние с разрешением конфликтов

<button className={cn("px-4 py-2", className)} />

Ошибка 3. Абстракция раньше времени

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

Как правильно: дождитесь третьего повторения. Два места с одинаковыми классами — это не дублирование, а совпадение: вполне возможно, завтра они разойдутся.

Ошибка 4. Компонент, который умеет всё

❌ Пропсы вместо композиции

<Card
  title="Отчёт"
  subtitle="за июль"
  showIcon
  iconPosition="left"
  footerButtons={[…]}
  variant="compact"
/>

✅ Композиция

<Card>
  <CardHeader>
    <CardTitle>Отчёт</CardTitle>
    <CardDescription>за июль</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button>Открыть</Button>
  </CardFooter>
</Card>

Почему: набор мелких компонентов гибче одного большого с флагами. Именно так устроены компоненты shadcn/ui — увидите в уроке 21.

Ошибка 5. Дублирование токенов в компонентах

Если в каждом компоненте написано bg-slate-900, смена фирменного цвета превращается в массовую замену по проекту. Используйте семантические токены (bg-primary) — тогда правка будет в одной строке CSS.

Ошибка 6. Классы, собранные из переменных

Напоминание из урока 03: cva и cn не отменяют правило целостности имени. Внутри вариантов классы должны быть записаны полностью — это и происходит, если описывать их таблицей, а не склеивать строками.