Когда применять Atomic Design

Atomic Design полезен при создании сложных интерфейсов, где важны переиспользуемость и масштабируемость компонентов. Он разбивает UI на 5 уровней:

1. Атомы – базовые элементы (кнопки, инпуты).
2. Молекулы – комбинации атомов (форма поиска = инпут + кнопка).
3. Организмы – более крупные блоки (шапка сайта).
4. Шаблоны – каркас страницы без контента.
5. Страницы – наполненные шаблоны.

Когда применять:

• Большие проекты с множеством компонентов.
• Командная работа – упрощает согласование.
• Дизайн-системы.

Пример атома:

const Button = ({ children, onClick }) => (
  <button onClick={onClick} className="btn">
    {children}
  </button>
);

Не стоит использовать для мелких проектов – избыточность.