Какие плюсы и минусы Atomic CSS?

Atomic CSS (utility-first) — подход, где каждый класс задаёт одно свойство: p-4, text-center, bg-blue-600. Самая известная реализация — Tailwind.

<button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700">
  Сохранить
</button>

Плюсы

• Быстрая разработка — не нужно придумывать имена и переключаться между файлами.
• Маленький итоговый CSS — классы переиспользуются, неиспользуемые удаляются при сборке.
• Единые токены — отступы, цвета, размеры берутся из конфигурации.
• Нет конфликтов и гонки специфичности — все классы одного веса.
• Легко удалять — стиль уходит вместе с разметкой.

Минусы

• Длинные строки классов — разметка хуже читается.
• Дублирование — одинаковые наборы классов нужно выносить в компоненты.
• Порог входа — нужно выучить названия утилит.
• Сложные состояния и анимации всё равно требуют обычного CSS.

Коротко для собеседования

Atomic CSS ускоряет разработку и уменьшает CSS за счёт мелких одноцелевых классов, но перегружает разметку и требует выносить повторы в компоненты.

Подробнее: Tailwind CSS — Utility-First