PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм

Современная веб разработка не стоит на месте, и с каждым днем сложность проектов только растет. Постоянно выходят новые инструменты, которые позволяют облегчить и автоматизировать работу разработчику, чтобы он мог идти в ногу со временем и отвечать современным требованиям, ритмам разработки. Сначала нам на помощь пришли препроцессоры less, sass, и т.д. Потом появились системы сборки проектов gulp, grunt, webpack и т.д. Вышли фрейморки, самый известный из них наверное sass compass.

Все было хорошо, но камнем преткновения стало то, что крупные проекты стали долго компилироваться и начали тратить драгоценное время разработчиков. Новым разработчикам тяжело было учить новый синтаксис препроцессоров, что усложняло подготовку новых кадров для компаний. Существующие крупные проекты было проблематично переписать на препроцессоры. Препроцессоры загрязняли CSS код делая его перегруженным функциями и миксинами, снижая его читабельность, особенно для малоопытных разработчиков в команде. Тогда на помощь пришел революционный проект PostCSS, который позволяет парсить существующие CSS файлы, и на их основе строить AST (Абстрактное синтаксическое дерево ^[1]) деревья и трансформировать это дерево с помощью своих JS плагинов. Это инновационный подход с высокой скоростью обработки входящих файлов. И с каждым днем популярность PostCSS ^[2] во всем мире только растет. PostCSS используют многие индустриальные лидеры, среди них google, github, ebay, wikipedia, taobao.

Многие разработчики пользуются такими известными плагинами как precss, cssnext, autoprefixer.

precss — позволяет сократить разрыв с препроцессорами и позволяет реализовать их функциональность с помощью PostCSS.

cssnext — позволяет уже сейчас использовать будущие возможности CSS.

autoprefixer — добавляет вендорные префиксы для CSS свойств, вам не нужно думать о префиксах(-o, -moz, -ms), autoprefixer сам добавит нужные префиксы, чтобы браузеры лучше поддерживали нужную функциональность.

Нет так давно в экосистеме PostCSS появился новый плагин — Hamster, который позволит вам сократить время разработки и поддержки ваших проектов. Это фреймворк, который призван стать альтернативой sass compass в PostCSS. И позволит разработчикам перейти на PostCSS, которые еще не сделали этого из-за отсутствия альтернативы compass. Фреймворк по сравнению с конкурентами имеет большую гибкость, высокую скорость работы и простой синтаксис.

Для установки PostCSS Hamster вам необходимо в существующем npm проекте выполнить команду:

npm install postcss-hamster --save-dev

Далее нам необходимо создать JS файл, который будет обрабатывать ваши файлы. В коде необходимо заменить filename.css на имя вашего входного файла, а outputfilename.css на имя файла, в который запишется результат.

var fs = require("fs"),
        postcss = require("postcss"),
        hamster = require("postcss-hamster"); 
fs.readFile("filename.css", "utf8", (err, css) => {
        postcss([hamster]).process(css).then(result => {
                fs.writeFileSync("outputfilename.css", result.css);
        });
});

Запускаем наш JS файл и получаем результирующий CSS файл.

node имяфайла.js

Более подробнее установка и настройка рассмотрена в документации.

К сожалению для того, чтобы ознакомиться с возможностями фреймворка и начать полноценно пользоваться им, вам необходимо прочесть документацию. Хорошая новость заключается в том, что вся документация на русском, хорошо документирована, и там представлены реальные примеры с которыми была подготовлена документация. С первого взгляда многим может показаться, что документация перегружена и сложна, но это не так. Документация специально разделена на логические части, что позволит даже неподготовленному пользователю легко начать работу с ним и postcss. А более опытные пользователи могут выбрать только то, что необходимо.

На данный момент фреймворк протестирован на нескольких моих проектах, но требуется тестирование со стороны пользователей, чтобы исключить баги. Так же принимаются пожелания и список возможностей, которые вы хотите увидеть в следующей версии. Сейчас проект находится в стадии RC и готовится к релизу, дальше будет вестись работа над версией 2.0 c новыми полезными и интересными функциями. Пожелания вы можете высказать в Gitter. Так же с радостью буду ждать ваши pull requests.

C уважением, разработчик PostCSS Hamster, Григорий!

Исходный код: Github ^[3]
Документация: RU ^[4]
Поддержка / Обсуждение: Gitter ^[5]

Автор: nullc0de

Источник ^[6]