Утилитарные классы используются в любом css-фреймворке. С их помощью решаются какие-то типовые задачи верстки, например задаются отступы или размер шрифта. Каждый фреймворк использует свои утилитарные классы, которые именуются не всегда очевидным образом.
Например в Bootstrap 4 есть такие классы:
.py-5, .pt-2, .p-5, .m-5, .my-1, .m-1, .m-n1, .text-reset
Понять их назначение невозможно без обращения к документации.
.p-5 {padding: 3rem !important;}
.m-n1 {margin: -0.25rem !important;}
.m-1 { margin: 0.25rem !important; }
.text-reset {color: inherit !important;}Во некоторых случаях css-классы меняют свое поведение. Например в UiKit 3 есть классы .uk-padding, который задает padding: 30px;, но при @media (min-width: 1200px)становится уже 40px.
Проблемы бывают и более глобального уровня. Например в Bootstrap 4 было принято решение, что для всех компонентов и многих элементов используется нулевой верхний отступ (margin-top:0), а отступы между элементами следует делать с помощью нижнего отступа. Это глобальное поведение, которое сложно изменить. Но что делать, если нужно состыковать два блока непосредственно друг к другу или задать какой-то другой вариант, не предусмотренный во фреймворке?
Библиотека Berry как раз и призвана решать эти проблемы.