Что такое утилита
Утилита — основной способ оформить и расставить элементы без собственного CSS. Эта глава даёт определение и объясняет, что утилиты дают проекту.
Определение
Утилита — CSS-класс, который задаёт значение одного свойства элемента: отступ, ширину, цвет фона, направление флекс-контейнера. Одна утилита — одно решение.
<div class="p-2 bg-surface-container radius-2">…</div>
Здесь три утилиты: внутренний отступ p-2, фон bg-surface-container и
скругление radius-2. Ни одной строки собственного CSS писать не пришлось.
Пример
Так же собирается и расположение частей: в примере ниже флекс-контейнер с переносом, промежуток между частями, отступ, фон и скругление заданы утилитами на одном элементе.
Не путайте утилиты с модификаторами компонентов — классами вида
sf-menu--horizontal, которые выбирают вариант компонента (см. Анатомия: корень, части, модификаторы, состояния). Это
другой механизм.
Зачем утилиты
- Сборка вместо написания. Вид элемента собирается из готовых классов в разметке. Не нужно придумывать имя класса, открывать файл стилей и следить, чтобы правило не разрослось.
- Значения только из системы. Утилита берёт значение из токена:
p-2— этоvar(--sf-space-2),bg-primary—var(--sf-primary). Случайных чисел в разметке не появляется, а смена темы или шкалы меняет все элементы сразу. - Адаптивность в одном месте. Условие перед классом (
md:flex-row) описывает поведение на другой ширине экрана прямо рядом с базовым видом. - Загружается только используемое. Loader находит классы на странице и подключает только нужные модули (см. Как утилиты попадают на страницу).
Утилиты без префикса
Классы компонентов в Framework начинаются с технического префикса sf-
(sf-button, sf-menu). Утилиты префикса не имеют: flex, p-2,
hidden, container. Это сделано ради краткости — утилиты пишутся десятками
на странице.
Обратная сторона: короткие общие имена (hidden, container, table,
content) могут совпасть с классами проекта или сторонней библиотеки. Если в
проекте уже есть свой .container, он будет конфликтовать с утилитой.
Проверяйте такие совпадения при подключении Framework к существующему коду.
Смотрите также: Анатомия: корень, части, модификаторы, состояния — модификаторы компонентов; Как утилиты попадают на страницу — как утилиты попадают на страницу.