Как утилиты попадают на страницу
Утилиты подключаются автоматически: Loader находит классы в разметке и загружает только нужные модули. Устройство Loader описано в Как работает Loader; здесь — только то, что важно для утилит.
Загрузка по требованию
Семейство утилит разбито на модули по условиям: как правило, отдельно
класс без условия, отдельно каждая контрольная точка и каждое состояние. Например, у
отступов есть модули padding/default, padding/sm … padding/xxl. Файл
модуля лежит в поставке по пути вида utility/padding/md/css/md.css, рядом —
сжатый md.min.css. Loader берёт сжатый файл; читаемый — когда на странице
включена отладка: SF_BOOT_CONFIG.minified = false, параметр ?sf-debug в
адресе или атрибут data-sf-debug у <html> (см. Как работает Loader).
Loader просматривает разметку, разбивает атрибут class на отдельные классы
и сравнивает каждый с правилами модулей. Нашёл md:p-x-4 — подключил
padding/md. Ничего не нашёл — ничего не подключил. За страницей Loader
следит и после загрузки, поэтому классы в разметке, добавленной скриптом,
тоже подхватываются.
Модули подключаются в постоянном порядке: без условия, sm, md, lg,
xl, xxl, затем hover, focus, focus-visible, active. Поэтому более широкое
условие надёжно перекрывает более узкое, а состояние — базовое значение.
Все утилиты лежат в каскадном слое sf.utilities. Последствия этого — в Утилиты и компоненты: где проходит граница.
Точные правила
Правило модуля знает конечный список своих классов. Оно собирается при
сборке Framework из реальных имён в таблице стилей, а не угадывается по
началу имени. Поэтому опечатка или несуществующее значение (gap-999,
flex-invalid) не подключит модуль впустую — класс просто не сработает.
Отсюда практическое правило: класс, которого нет в справочнике, не появится из-за того, что «похож на правильный». Не составляйте имена по аналогии, проверяйте их.
Совместимость
Если в разметке встречается имя, которое Framework перестал считать каноническим, оно продолжает работать в течение срока совместимости; как Framework сообщает о таких именах и выводит их из оборота — см. Жизненный цикл изменений.
Для модулей утилит у Loader есть короткий список псевдонимов: прежние модули
column-gap/* (column-gap/default … column-gap/xxl) он подключает как
основные gap/*. Это правило выбора файла, а не разрешение придумывать
одноимённые классы: какие классы есть, говорит только страница утилиты в
справочнике. При закреплённом плане ресурсов рабочей сборки псевдонимы не
применяются — план сам называет свои файлы.
Как уйти от прежнего имени:
- найдите основное имя на странице утилиты в справочнике;
- замените прежнее имя и убедитесь, что нужный модуль подключился;
- проверьте вид без условий, на разных ширинах экрана и в обоих направлениях письма.
Полный набор
Кроме загрузки по требованию, в поставке есть полный файл утилит
core/css/utility.full.css. Он нужен там, где Loader не работает,
например в окружениях без JavaScript. На обычной
странице полный файл не нужен — Loader подключит только используемое.
Смотрите также: Как работает Loader — Loader и поставка; Жизненный цикл изменений — совместимость и обновление; Утилиты и компоненты: где проходит граница — каскадный слой утилит.