Компонентный CSS против утилитарного

Вопрос простой: где живёт оформление — в CSS или в разметке.

Компонентный подход: в разметке имя сущности, в CSS её описание. class="card" — а как выглядит карточка, написано в стилях.

Утилитарный подход: в разметке набор атомарных классов, каждый отвечает за одно свойство. class="p-4 bg-white rounded-xl" — и никакого CSS писать не нужно.

Tailwind популярен не потому, что «модно». Он закрывает четыре настоящие боли, знакомые каждому, кто вёл проект дольше полугода.

• Разметка перестаёт читаться. Двенадцать классов на элементе прячут структуру. Чтобы понять, что это карточка товара, приходится вглядываться.
• Повторение. Двадцать карточек — двадцать одинаковых наборов классов. Поменять все разом уже нельзя: нужно править каждую или заводить компонент.
• Нужна сборка. Полный набор утилит весит много; в проект попадают только использованные — а значит, требуется инструмент, который их вычислит.
• Свой язык. rounded-xl и gap-2 надо знать. Обычный CSS знают все.

<!-- Что это за блок? Придётся вчитываться -->
<div class="flex items-center gap-3 p-4 rounded-xl
  bg-white shadow-sm hover:shadow-md transition
  border border-gray-200 dark:bg-gray-800">

<!-- Сразу понятно, что это -->
<article class="product-card">

На практике команды редко выбирают крайность. Работающее правило деления такое.

Компоненты — для сущностей. Всё, у чего есть название в предметной области: карточка товара, шапка, форма заказа.

Утилиты — для раскладки и мелких правок. Отступ между блоками, выравнивание, скрытие на мобильном. То, что не является частью сущности и меняется от места к месту.

1<!-- Утилиты снаружи: расстояния задаёт контейнер -->2<section class="stack gap-6">34  <!-- Компонент внутри: сущность со своим именем -->5  <article class="product-card">6    <h3 class="product-card__title">Раф</h3>7    <p class="product-card__price">240 ₽</p>8  </article>910  <!-- Утилита для разовой правки, без нового класса -->11  <p class="text-center">Показать ещё</p>12</section>

Чтобы получить пользу от утилит, фреймворк не обязателен. Двадцать классов покрывают девяносто процентов случаев, и их можно написать руками за полчаса.

1@layer utilities {2  /* Раскладка */3  .stack { display: grid; }4  .row { display: flex; align-items: center; }5  .row--between { justify-content: space-between; }67  /* Расстояния — по шкале, произвольных чисел нет */8  .gap-1 { gap: var(--space-1); }9  .gap-2 { gap: var(--space-2); }10  .gap-4 { gap: var(--space-4); }11  .gap-6 { gap: var(--space-6); }1213  /* Текст */14  .text-center { text-align: center; }15  .text-muted { color: var(--color-muted); }16  .text-sm { font-size: .875rem; }1718  /* Состояния видимости */19  .is-hidden { display: none; }20  .visually-hidden {21    position: absolute;22    inline-size: 1px;23    block-size: 1px;24    overflow: hidden;25    clip-path: inset(50%);26  }27}

Разница между подходами лучше всего видна не на одной карточке, а на графике роста.

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

1@layer reset, base, layout, components, utilities;23@layer components {4  .product-card {5    display: grid;6    gap: var(--space-2);7    padding: var(--space-4);8    background: var(--color-surface);9    border-radius: var(--radius-md);10  }11}1213@layer utilities {14  /* Побеждает компонент по определению, без !important */15  .p-0 { padding: 0; }16  .text-center { text-align: center; }17}

<article class="card">  <h3>Обычная карточка</h3>  <p>Отступ и выравнивание из компонента</p></article>​<article class="card p-0 text-center">  <h3>Та же карточка</h3>  <p>Утилиты перекрыли, и без !important</p></article>

@layer components, utilities;​@layer components {  .card {    padding: 20px;    margin-bottom: 12px;    background: #f4f4f8;    border-radius: 12px;    text-align: left;  }​  .card h3 { margin: 0 0 6px; font-size: 16px; }  .card p { margin: 0; font-size: 14px; color: #5b6070; }}​@layer utilities {  .p-0 { padding: 0; }  .text-center { text-align: center; }}

• Утилиты без сборки на большом сайте. Полный набор весит сотни килобайт. Без инструмента, вырезающего неиспользуемое, это чистый вред.
• Компоненты для одноразового блока. Если блок встречается один раз и больше не появится, класс с именем — лишняя сущность. Хватит утилит.
• Смешивать без правила. Хуже обоих подходов — когда часть оформления в компоненте, часть в утилитах, и никто не знает, где искать. Договорённость важнее выбора.
• Спорить об этом дольше часа. Оба подхода рабочие. Проект гораздо чаще умирает от отсутствия договорённости, чем от неправильного выбора.

<article class="p-4 bg-surface rounded-md gap-2 grid">  <h3 class="m-0 text-md">На утилитах</h3>  <p class="m-0 text-sm text-muted">Оформление в разметке</p></article>​<article class="text-center">  <h3>Компонентная</h3>  <p>Здесь должен быть класс card</p></article>

/* Объяви слои и собери компонент */​.p-4 { padding: 16px; }.bg-surface { background: #f4f4f8; }.rounded-md { border-radius: 12px; }.gap-2 { gap: 8px; }.grid { display: grid; }.m-0 { margin: 0; }.text-md { font-size: 16px; }.text-sm { font-size: 14px; }.text-muted { color: #5b6070; }.text-center { text-align: center; }

1<article class="p-4 bg-surface rounded-md gap-2 grid">2  <h3 class="m-0 text-md">На утилитах</h3>3  <p class="m-0 text-sm text-muted">Оформление в разметке</p>4</article>56<article class="card text-center">7  <h3>Компонентная</h3>8  <p>Здесь должен быть класс card</p>9</article>

1@layer components, utilities;23@layer components {4  .card {5    display: grid;6    gap: 8px;7    margin-top: 12px;8    padding: 16px;9    background: #f4f4f8;10    border-radius: 12px;11    text-align: left;12  }1314  .card h3 { margin: 0; font-size: 16px; }15  .card p { margin: 0; font-size: 14px; color: #5b6070; }16}1718@layer utilities {19  .p-4 { padding: 16px; }20  .bg-surface { background: #f4f4f8; }21  .rounded-md { border-radius: 12px; }22  .gap-2 { gap: 8px; }23  .grid { display: grid; }24  .m-0 { margin: 0; }25  .text-md { font-size: 16px; }26  .text-sm { font-size: 14px; }27  .text-muted { color: #5b6070; }28  .text-center { text-align: center; }29}