Урок 15. Организация кода: @apply, @utility, cn, cva

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

⚡ Кратко

Повторяющийся набор классов выносят не в CSS-класс через @apply, а в компонент. Инструменты: clsx — собрать классы по условию, tailwind-merge — разрешить конфликты, cva — описать варианты и размеры. Своя утилита (не компонент) объявляется директивой @utility.

О чём этот урок

Это ответ на главную претензию к утилитарному подходу: «разметка превращается в кашу». Разберём, когда пора извлекать компонент, почему @apply — обычно не то, что нужно, и как устроена связка cn() + cva, на которой построен shadcn/ui. После этого урока вы будете готовы к разбору настоящих компонентов из второй половины курса.

Структура урока

Теория

Компонент против @apply, cn, cva, порядок классов.

Справочник

Директивы и пакеты с примерами.

Примеры

Кнопка, бейдж, поле — от разметки к компоненту.

Старый vs Новый

@apply-компоненты против cva.

Задания

Собрать компонент с вариантами.

Решения

Готовый код с разбором.

Ошибки

@apply везде, конфликты классов, преждевременная абстракция.

Домашнее задание

Свой мини-набор компонентов.

Ресурсы

Документация пакетов.

Практика

  • Найдите в своём коде набор классов, повторяющийся трижды.
  • Вынесите его в компонент с вариантами через cva.
  • Убедитесь, что переданный снаружи className побеждает базовый.

Навигация