Семантика классов Berry CSS
В 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, а ширина в процентах.
Модификаторы адаптивности
Модификаторы адаптивности (названия и значения) могут быть произвольными. По умолчанию используется только один модификатор -tablet, который эквивалентен условию max-width: 768px.
При желании можно использовать любые модификаторфы адаптивности, если скомпилировать Berry CSS через Sass.
Префикс состояния «hover-»
Префикс используется для классов, которые срабатывают на событие hover:. Этот префикс указывается первым в имени класса.
Модификатор «-var»
Это модификатор указывает на то, что данный класс может использовать css-переменные. Они указываются в атрибуте style.
CSS-переменные указываются со значением по умолчанию, что позволяет указывать только те, которые требуют изменения.
Некоторые классы поддерживают css-переменные, но не имеют суффикса «-var», поскольку могут использоваться со значением по умолчанию.
Правила именования
Существует несколько правил именования классов Berry CSS.
- В качестве разделителя используется символ
-(дефис), а не подчеркивание. - Перед числами разделитель не ставится.
- Суффиксы единиц измерения пишутся без разделителя.
Примеры верных имён:
w10 w250px t180-tablet t-center
Ошибочные имена:
w-10 — перед числами не должно быть разделителя w250-px — единицы изменения должны сразу следовать за числом t_center — недопустимый разделитель «_»
Данные правила уменьшают количество ошибок при их использовании в html-коде.