Berry CSS 3.0 — релиз

09-09-2020Время чтения ~ 5 мин.Berry CSS 5778

Сегодня выложил релиз Berry 3.0, доступный по адресу https://maxsite.org/berry. Подготовка версии заняла примерно 2 месяца. В этот раз подход к разработке был изменён — вначале была готова документация, и только сейчас вышел полноценный релиз версии (почти на месяц позже). Сейчас у Berry хорошая документация: это и справочник классов, и примеры, и общие описания. Есть отдельный раздел «Блоки», который предназначен не только как пример возможностей Berry CSS, но и для копирования готового html-кода в свои шаблоны.

Третья версия сильно отличается от всех предыдущих. Можно сказать, что она продолжает развитие UniCSS, где была своя типографика. Вообще Berry я выделил из UniCSS, поскольку предполагал использование утилитарных классов с любым другим css-фреймворком. Основная надежда была на Bootstrap, поскольку его разработчики готовили 5-ю версию, которая, как я предполагал будет уже использовать современные CSS-наработки. После выхода первой альфы Bootstrap, я понял, что он «застрял» на идеях пятилетней давности и ждать от него чего-то большего уже не стоит. Это и стало толчком к созданию новой версии Berry, которая уже будет содержать и полноценную типографику, и js-компоненты.

Berry CSS состоит из раздельных модулей: сбросы (reset), утилитарные классы (utilities), типографика (typography), цвета (colors) и компоненты (components). Модули могут использоваться отдельно, точно также как и все их составные части. Для меня это очень важно, поскольку многим сайтам просто не нужны все возможности и должен быть простой способ их отключения.

Если бы Sass позволял использовать условия в импорте файлов, то можно было бы всё делать через настройки. Но так приходится вручную редактировать scss-файлы.

То есть я категорически против «монолита», которые тотально используются в большинстве css-фреймворков. В Berry можно использовать только то, что реально востребовано.

Модуль сбросов использует 100% оригинальный normalize. Это важно, поскольку даёт точку отсчёта для всех тэгов и блоков. Тот же Bootstrap использует модифицированный сброс, где жестко прописываются отступы и прочие стили из типографики. Это создаёт большую проблему неадекватного поведения блоков, поскольку при верстке практически любого блока приходится учитывать все эти изменения. Мы думаем, что изначально у заголовков нулевые отступы, а на самом деле — это не так. В Berry используется чёткое разделение — сбросы — это сбросы, а типографика — это типографика. Настраивай как душе угодно.

Модуль утилитарных классов является «ядром» фреймворка, классы которого в основном и используются при создании сайта. Сейчас в CSS очень много новых возможностей и есть соблазн их включить в Berry. Но, я постарался этого избежать, поскольку это может привести к излишнему коду — потребность в новых «фишках» очень скромная. Поэтому в основе это всё-таки реальная потребность верстальщиков. Я ориентируюсь, конечно, на свои потребности, но за много лет довольно неплохо их понимаю. :-)

Модуль типографики задаёт внешний вид и поведение в основном «голых» html-тэгов. Все настройки вынесены отдельно, но главное, что теперь используются css-переменные. То есть можно многое переопределить без sass-компиляции. Это очень удобный и современный способ кастомизации любого сайта или отдельного блока.

Модуль цветов переписывался несколько раз, чтобы сделать его более удобным для использования. Главная особенность — это то, что цвета определяются через группы. То есть генерация css-классов происходит на основе групп, а не одиночных цветов. Такой подход позволяет не только выстраивать произвольные палитры, но и легко ими управлять. В Berry CSS аж 14 палитр по 19 цветов, но не все они будут реально востребованы в проекте. Поэтому можно выбрать только те, которые используются, а остальные отключить. Это существенно сократит результирующий css-файл.

Ну и главное — это полная поддержка Material Design, о которой я ранее уже писал. Это меняет сам подход к вёрстке, но он очень продуктивный. Я ещё занят переделкой шаблона MF под эту концепцию и очень доволен. Больше не нужно заниматься подбором цветов, достаточно ориентироваться в их яркостной градации. А смена оттенков происходит за 3 секунды без переписывания html-кода. Почему я раньше не решился на такой подход, для меня загадка. Наверное Berry будет единственным в мире css-фреймворком, который полностью поддерживает Material Design в его исходном понимании. То что при этом меняется подход к верстке меня не пугает. Желающие могут продолжать использовать фиксированные цвета и палитры, благо Berry позволяет использовать любой вариант. :-)

Компоненты представляют собой независимые модули. Я был раздосадован, когда в Bootstrap 5 убрали зависимость от jQuery, но при этом размер собственного js-кода увеличился. Как такое вообще возможно? Смысл был в том, чтобы уменьшить зависимость от js-файлов, которые очень сильно влияют на скорость отрисовки страниц. А они сделали всё наоборот — Bootstrap 5 стал ещё медленее...

В Berry CSS компоненты не должны иметь никаких внешних зависимостей. Если есть js-код, то он нативный. Если есть scss, то он самостоятельно компилируется в css. И при этом только отдельное подключение. Никаких монолитов — компоненты подключаются там, где они используются. То есть как именно использовать компоненты решает вебмастер.

Пока в комплекте только 3 компонента: dropdown, modal и tabs. Новые компоненты будут в следующих версиях, поскольку их разработка не такая простая как может показаться. Ну и кроме того, положа руку на сердце, на сегодняшний день таких компонентов уже вагон и маленькая тележка. Можно выбрать что-то готовое и добавить в свой проект. Это однозначно лучше, чем создавать дополнительную зависимость. Поэтому в плане компонентов я исхожу, опять же, из реальной потребности. Например нет никакого смысла делать аккордеон, поскольку есть нативный DETAILS.

Что ещё... Berry CSS — это Atomic CSS. В своём телеграм-канале я уже писал о том, что эта методология будет востребована теми, кто делает много сайтов/шаблонов/лендингов, то есть там, где верстки много и она разная. Если вебмастер сидит на одном проекте месяцами, то он будет «пилить» свои css-классы до зеркального блеска и Atomic CSS ему просто не нужен.

А для тех верстальщиков, которым нужна «железобетонная» вёрстка в удобной и семантически понятной методике, Berry CSS будет хорошим помощником.

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

Ближайшая крупная переделка, где я буду использовать новые возможности Berry — это шаблон MF. Впрочем, об этом будет другая история. :-)