Що таке utility-клас?
Utility-клас - це CSS-клас, який відповідає строго за одну конкретну властивість і застосовується до елемента, щоб надати йому окрему візуальну характеристику. Такий клас не "описує компонент", а виконує одну маленьку функцію - наприклад, задає відступ, колір, шрифт або вирівнювання.
Приклад utility-класів
html
<div class="mt-4 text-center bg-gray-200 p-2">Тут кожен клас - окрема властивість:
| Клас | Що робить |
|---|---|
mt-4 | задає верхній відступ |
text-center | вирівнює текст |
bg-gray-200 | встановлює фоновий колір |
p-2 | задає внутрішній відступ |
Ознаки utility-класу
- відповідає за одне завдання / одну CSS-властивість;
- короткий і стандартизований;
- комбінується з іншими для оформлення елемента;
- не залежить від контексту - поводиться передбачувано в будь-якому місці.
Навіщо це потрібно
Utility-підхід (наприклад, у Tailwind) дає змогу:
- швидко збирати UI без написання власного CSS;
- уникати конфліктів каскаду;
- підтримувати консистентний дизайн (усі беруть одні й ті самі значення).
Підсумок
Utility-клас - це маленький, атомарний CSS-клас, який задає одну властивість і слугує будівельним блоком для інтерфейсу. Разом такі класи дають змогу конструювати зовнішній вигляд елементів без створення кастомних CSS-правил.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.