Логотип Berry CSSBerry CSS 3.0

Семантика

В Berry CSS применяется простая семантика, которая часто встречается в других фреймворках. Она базируется на том, что любой класс начинается с префикса, указывающего на его функциональную группу. После этого идёт модификатор, описывающий его основное назначение. Суффиксы (постфиксы) уточняют действие модификатора.

Префиксы групп назначения

Допускается использование в качестве префикса имя css-свойства. Например animation-, object-fit-, column-, cursor-, transition-, z-index и т.п. Такие префиксы однозначно указывают на свою принадлежность.

Модификаторы

Единицы измерения

В некоторых классах явно указываются единицы измерения, чтобы не создавать путаницу.

Если в классе нет такого модификатора, то используются единицы по умолчанию. Например размер текста указывается в rem, а ширина в процентах.

Модификаторы адаптивности

Модификаторы адаптивности (названия и значения) могут быть произвольными.

Префикс состояния «hover-»

Префикс используется для классов, которые срабатывают на событие hover:. Этот префикс указывается первым в имени класса.

Модификатор «-var»

Это модификатор указывает на то, что данный класс может использовать css-переменные. Они указываются в атрибуте style. Например:

<div class="flex-basis-var" style="--basis: 180px">

<div class="bor-var" style="--style: dotted; --width: 3px; --color: #00468c">

<div class="gr-linear-var" style="--start: yellow; --end: orange; --direct: to bottom">

CSS-переменные указываются со значением по умолчанию, что позволяет указывать только те, которые требуют изменения.

.bor-var {
    border-style: var(--style, solid);
    border-width: var(--width, 1px);
    border-color: var(--color, #D4D7DD);
}

<div class="bor-var" style="--color: #00468c">
Обратите внимание, что некоторые классы поддерживают css-переменные, но не имеют суффикса «-var», например rounded, поскольку могут использоваться со значением по умолчанию.

Правила именования

Существует несколько правил именования классов Berry CSS.

Примеры верных имён:

w10
w250px
t180-phone
t-center

Ошибочные имена:

w-10 — перед числами не должно быть разделителя
w250-px — единицы изменения должны сразу следовать за числом
t_center — недопустимый разделитель «_»

Данные правила уменьшают количество ошибок при их использовании в html-коде.