Утилитарный класс

Обычный, «семантический» класс описывает, что это за блок: .product-card, .site-header, — а все его стили лежат в CSS. Утилитарный класс описывает, как блок выглядит: .text-center, .mt-4, .d-none. Каждое такое правило содержит одно-два свойства, и смысл класса понятен по названию без заглядывания в файл стилей.

Небольшой набор утилит есть почти в каждом проекте — например, класс для визуально скрытого текста или сброса отступа. Подход utility-first идёт дальше: почти вся вёрстка собирается из утилит, а собственный CSS пишется редко. На этом построен Tailwind CSS; в Bootstrap утилиты дополняют готовые компоненты. Встречаются они и в WordPress: редактор блоков добавляет к разметке классы вроде has-text-align-center или has-large-font-size.

Пример

/* утилиты в стиле Bootstrap */
.mt-0        { margin-top: 0 !important; }
.text-center { text-align: center !important; }
.d-none      { display: none !important; }

<!-- разметка в стиле Tailwind -->
<button class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
  Отправить
</button>

В Bootstrap утилиты объявлены с !important: класс должен сработать, даже если у компонента более сильная специфичность. В Tailwind значения отступов и цветов берутся из единой шкалы, поэтому разработчик не может случайно поставить 13 пикселей там, где принято 12 или 16.

Плюсы и минусы подхода

• Плюсы. Не нужно придумывать имена классов. CSS почти не растёт с развитием проекта: новые страницы переиспользуют те же утилиты. Правка видна прямо в разметке, и её не надо искать по файлам стилей.
• Минусы. Разметка становится длинной и шумной. Одинаковые наборы классов повторяются в десятках мест, и изменить вид всех кнопок разом без шаблонов или компонентов трудно. Новичку в проекте сложнее читать HTML.

Как совместить с обычными стилями

Повторяющиеся сочетания утилит выносят в компонент шаблона (в PHP-шаблоне, React или Vue) либо в собственный класс. Во втором случае помогают миксины препроцессора или директива @apply в Tailwind. Чтобы утилиты надёжно перебивали стили компонентов без !important, их помещают в отдельный слой каскада, объявленный последним: @layer base, components, utilities;. На готовых темах WordPress и шаблонах Битрикса разумнее добавлять несколько утилит точечно, чем переводить всю вёрстку на новый подход.