Классы-утилиты (utilities)

Классы-утилиты (utility classes или просто utilities) служат для добавления строго определённых свойств элементам разметки. Очень часто эти классы содержать только одно объявление (opens new window), усиленное модификатором !important (вообще этот модификатор рекомендуется использовать только в классах-утилитах).

Название этих классов всегда должно начинаться с префикса u-, например u-position-absolute. В структуре проекта файлы содержащие определения классов-утилит располагаются в папке styles/utilities.

ВНИМАНИЕ

Классы утилиты не следует менять или расширять. Они должны быть неизменными. Не следует использовать их для привязки функционала javascript.

Классы-утилиты не привязаны к отдельным элементам интерфейса, они многократно используются во многих местах вёрстки.

Утилиты Bootstrap

Помимо собственных, мы используем некоторые классы-утилиты, заимстваванные из Bootstrap (opens new window), но с добавлением префикса u-. Например, вместо класса Bootstrap clearfix следует использовать класс u-clearfix для достижения того же эффекта (opens new window).

Пример использования

<div class="col-12 col-lg-3 u-mb-30 u-mb-md-55 order-md-1">
    ...
</div>

Справочные материалы

• https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
• https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/