Те кто читает меня в телеграмм-канале знают, что я сейчас плотно занят переделкой Berry CSS. Да и на сайте я делал анонс. Переделка очень большая, затрагиваются все основные модули, но главное, я решил, что вначале будет документация, а уже потом будет публичная версия (значительно позже).

Поэтому, желающие могут ознакомиться с ранней версией документации, которая идёт в комплекте с версией Berry — alpha 7. Скачать версию Berry не получится, поскольку это закрытый репозиторий, но желающие могут вытянуть css-файл из документации, чтобы поиграться при желании.

Также я хочу немного остановиться на основных изменениях и новых возможностях css-фреймворка.

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

Концепция css-переменных очень проста, но судя по многочисленным публикациям, она создаёт определённое непонимание на уровне «а зачем они вообще нужны?». Как правило верстка выполняется с помощью препроцессоров (в первую очередь Sass). Но поскольку там уже есть свои переменные, то становится непонятно, зачем ещё создавать их на уровне CSS.

Ответ кроется в понимании того, для кого именно создаются css-переменные и какое у них будет назначение.

Генератор мне потребовался для создания документации для новой версии Berry CSS. Но перед этим я хочу сделать небольшой анонс. Я о нём уже писал в своём телеграмм-канале, продублирую и здесь.

Я решил расширить возможности Berry и сделать из него полноценный css-фреймворк на основе утилитарных классов. Основная задача - повторить Bootstrap по возможностям, за исключением сложных js-компонентов. Отличие Berry в том, что утилитарными классами можно выполнить вёрстку практически любого блока, то есть это универсальный подход. Но, чтобы показать его преимущество, нужна полноценная документация. Поэтому Berry 3 (будущая версия) выйдет только после того, как я напишу всю документацию.

Структурно Berry будет состоять из нескольких модулей. Первый — утилитарные классы, это примерно то, что сейчас и есть. Второй модуль — типографика. Это примерно то, что входит в комплект UniCSS. Третий модуль — цвета. Я сильно их переиграл, чтобы можно было работать не только с индивидуальными цветами, но и целыми группами. Например, если шаблон использует только красные оттенки, то достаточно указать только эту группу. И последнее — будет несколько js-компонентов на чистом javascript без каких-либо зависимостей. Меня, честно говоря, уже задолбало учитывать версии jQuery, и прочих библиотек. Такие компоненты состоят из css, scss и js-файлов + readme и всё. Подключай как хочешь.

Начну с истории. :-) Первая версии Bootsrtap'а была мало привлекательна. Вторая версия уже предлагала готовую типографику и ряд компонентов. С учётом сумасшедшего пиара со стороны Твиттера (это их разработка), Bootsrtap стал самым популярным css-фреймворком. Третья версия стала доделкой второй — чтобы было понятно — это 2013 год. Нельзя сказать, что код Bootsrtap'а идеальный — там очень много «косяков» и архитектурных просчётов, но это всё нивелировалось хорошей документацией и, опять же, сумасшедшим пиаром.

Многие решили, что Bootsrtap 3 станет последней версией и всё к этому и шло, поскольку команда поддерживала только эту версию, а обещания выпустить следующую тонули в многочисленных альфа-версиях (4-я версия всё-таки вышла в 2018 году). Проблема состояла в том, что веб-вёрстка динамично развивающая отрасль и уже пошли серьёзные подвижки в HTML 5, CSS 3, а также развитие браузеров. То есть Bootsrtap 3 просто перестал нормально отвечать современных запросам. Скажем отсутствие поддержки единиц REM, хотя они уже полностью поддерживались в IE11, а частично в 9 и 10 версии.

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

Расскажу немного о Tailwind CSS, поскольку этот фреймворк позиционируется как утилитарный и мне интересен в сравнении и моими UniCSS и Berry CSS.

У Tailwind высокая популярность — почти 25 тысяч звёзд на гитхабе. На мой взгляд это очень круто — ребята хорошо вложились в раскрутку. :-)

Важный момент в том, что Tailwind написан на JS, то есть там нет css-кода как такового. Его идея в том, чтобы подключать нужные компоненты как js-модули, которые в свою очередь генерируют нужный css-код. Наверное именно поэтому его используют в js-фреймворках на node.js - сборка получается скопом, как там и принято.

Если абстрагироваться от самого сборщика, то идея генерировать css-классы ровно такая же, как и в моём UniCSS (и Berry). Я это реализован в конце 2014 года на Less (потом перешел на Sass), а Tailwind появился на 3 года позже со сборщиком на JS. В нём используется тот же самый подход, когда верстальщик сам указывает какие именно классы ему нужны.