Utility-First CSS

Berry CSS — фреймворк на основе утилитарных классов

Utility-First CSS — это архитектурный подход CSS, при котором используются готовые (утилитарные, utility) классы для стилизации элементов непосредственно в HTML-разметке, вместо того, чтобы создавать пользовательские классы для каждого блока.

Berry CSS предоставляет обширную библиотеку CSS-классов, которые могут определять поля, отступы, размеры, шрифты, цвета, сетку flexbox, сетку grid и многое другое. С помощью Berry CSS существенно сокращается время разработки и верстки HTML-макетов, а единая семантика классов улучшает согласованность разных проектов.

Основные характеристики Berry CSS:

Повторное использование: css-классы предназначены для многократного использования, что упрощает поддержание единообразия стилей в рамках проекта.
Скорость: разработчики могут стилизовать элементы непосредственно в HTML, не переключаясь между файлами HTML и CSS, что ускоряет процесс разработки.
Настраиваемость: Berry CSS позволяет настраивать ваш проект в очень широких пределах, как с помощью Sass, так и с помощью CSS-переменных.
Адаптивность: классы Berry CSS включают адаптивные варианты, что упрощает создание адаптивных дизайнов для мобильных устройств.
Согласованность: использование предопределенного набора служебных классов, простая их семантика, повышает вероятность того, что дизайн будет оставаться согласованным на веб-сайте или в приложении.
Поддерживаемость: сокращает объем CSS и потенциальные конфликты специфичности.
Производительность: обеспечивает быструю разработку пользовательского интерфейса, особенно на этапе создания прототипа.
Малый размер: Berry CSS в готовом виде представляет собой css-файл размером примерно 170Кб (в сжатом виде/трафик — это всего 25Кб). Для сравнения — Tailwind CSS в готовом виде занимает примерно 3Мб (в сжатом виде 280Кб).

Отличия Berry CSS от других Utility-First-фреймворков

Berry CSS не пытается охватить все css-свойства и сделать для каждого отдельный класс. Поэтому в Berry CSS только те классы, которые охватывают подавляющее большинство задач вёрстки. Если какого-то специфичного класса в Berry CSS нет, то вы всегда можете его создать, либо использовать inline-STYLE.

Такой подход позволяет держать размер итогового css-файла в скромных размерах, но при этом иметь очень хорошую функциональность.

Основы Utility-First

С помощью небольших утилитарных классов можно создавать сложные компоненты. Традиционный подход к вёрстке подразумевает создание HTML-разметки и уникальных CSS-классов. Утилитарный подход позволяет использовать уже готовый классы.

Например блок:

ChitChat

You have a new message!

С Berry CSS код получится таким:

<div class="b-center w-max-max-content flex flex-ai-center bg-white rounded10 pad15-tb pad30-rl b-shadow3">
    <div class="pad20-r">
        <img class="w40px" src="images/chitchat-logo.svg" alt="ChitChat Logo">
    </div>
    <div>
        <div class="t150 t-black">ChitChat</div>
        <div class="t-gray600">You have a new message!</div>
    </div>
</div>

При традиционном подходе потребовалось бы написать намного больше:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="images/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <div class="chat-notification-title">ChitChat</div>
    <div class="chat-notification-message">You have a new message!</div>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin: 0 auto;
    padding: 15px 30px;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 40px;
    width: 40px;
  }
  .chat-notification-content {
    margin-left: 20px;
  }
  .chat-notification-title {
    color: #000;
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Смысл в том, что в Berry CSS уже есть все необходимые классы для html-верстки. Когда нужно настроить блок или что-то поменять, то с Berry CSS достаточно просто указать нужный класс, а в традиционном подходе придётся менять ещё и css-код.