Семантика

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

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

• b- — блоки
• t- — текст
• bg- — фон (background)
• bor- — бордюры (border)
• layout- — контейнеры
• flex- — FlexBox
• grid- — CSS Grid
• h- — высота (height)
• w- — ширина (width)
• mar- — отступ внешний (margin) / настраивается
• pad- — отступ внутренний (padding) / настраивается
• hide- — невидимость
• show- — видимость
• pos- — позиционирование (position)
• lh- — интерлиньяж (line-height)
• va- — вертикальное выравнивание (vertical-align)
• opacity- — прозрачность (opacity)
• rounded- — скругление (border-radius)
• gr- — градиенты
• list- — списки ul/ol/li
• links- — классы для ссылок
• hover- — классы для состояния :hover

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

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

• -max — max-size (например: max-height)
• -min — min-size (например: min-height)
• -t — top
• -r — right
• -b — bottom
• -l — left
• -tb — top и bottom
• -rl — right и left
• -imp — для !important

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

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

• px — px
• em — em
• vh — vh
• rem — rem

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

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

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

• -small — (max-width: 360px)
• -phone — (max-width: 667px)
• -tablet — (max-width: 768px)
• -medium — (max-width: 1024px) (не используется)
• -desktop — (max-width: 1200px (не используется)
• -large — (min-width: 1201px) (не используется)

Префикс состояния «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-коде.