Ответ
Atomic CSS — это подход к написанию стилей, где каждый класс соответствует одному конкретному CSS-свойству. Вместо создания семантических классов (например, .card) используются атомарные классы, которые описывают отдельные свойства (например, .p-4 для padding: 1rem).
Пример:
<button class="p-2 bg-blue-500 text-white rounded">
Click me
</button>Здесь:
.p-2— padding: 0.5rem.bg-blue-500— background-color: синий.text-white— color: белый.rounded— border-radius: 0.25rem
Плюсы:
- Минимизация дублирования кода (DRY).
- Уменьшение размера CSS (так как классы переиспользуются).
- Быстрое прототипирование.
Минусы:
- Менее читаемый HTML из-за множества классов.
- Сложность в поддержке кастомных дизайн-систем.
Популярные библиотеки: Tailwind CSS, Tachyons.