После статьи про БЭМ CSS погрузился в дивный мир современных CSS технологий. В связи с тем, что сам я в основном работаю с Rails, то как оказалось я немного отстал от жизни и пропустил такую интересную штуку как PostCSS, которая потихоньку становится мэйнстримом, чему в немалой степени способствует застой в мире SASS, Compass, Stylus и иже с ними.
Ничего плохого не могу сказать про традиционные препроцессоры, но видимо их время уходит. Судя по всему они уже достигли потолка своих возможностей и какого-то дальнейшего развития не предвидится.
PostCSS
На этой оптимистичной ноте стоит поглубже изучить их потенциального преемника, а именно PostCSS. Собственно я периодически слышал про этот проект, но никогда особого значения не придавал, т. к. считал его очередным «одним из» препроцессором, коих развелось в последнее время довольно много.
Причиной же, по которой он удостоился моего внимания стал БЭМ форум, где он активно упоминался. Кроме того он используется внутри enb-stylus для итоговой обработки, что для меня выглядело довольно странно.
Наиболее важным на мой взгляд достоинством PostCSS является его модульность и расширяемость. Любые ваши фантазии могут быть реализованы дополнительным плагином.
Кроме того есть возможность подключать синтаксические анализаторы, что фактически позволяет реализовать любой входной синтаксис., а так же сделать понятным для PostCSS синтаксис уже существующих препроцессоров.
В этом видео Андрей Ситник (автор PostCSS) подробно и доходчиво рассказывает, что это такое и зачем оно нужно. Очень познавательно — настоятельно рекомендую к просмотру.
Ну что — пробуем добавить эту штуку в наш конфиг. Для начала добавим сам PostCSS
1 | $ npm i --save-dev enb-postcss |
Так как голый PostCSS сам делать ничего не умеет поставим ему пачку плагинов. Полный набор плагинов кстати можно посмотреть тут
1 | $ npm i --save-dev postcss-nested postcss-mixins postcss-simple-vars autoprefixer postcss-easings postcss-cssnext postcss-autoreset postcss-initial postcss-bem postcss-import |
Теперь подключаем всё это добро в наш конфиг .bem/make.js
1 | var techs = { |
Важный момент — enb-postcss
по умолчанию добавляет файлы в виде импорта, полностью полагаясь на плагин postcss-import
, поэтому наличие postcss-import
обязательно иначе подключенный плагины работать не будут.
В данном примере так же подключил autoprefixer
. Соответственно после генерации бандла мы можем наблюдать в итоговом CSS файле кучу браузерных префиксов.
SugarSS
Автор PostCSS активно продвигает в качестве синтаксиса для CSS новый формат, а именно SugarSS
. Формат явно сделан под влиянием Stylus ибо сильно похож на него. Я полностью разделяю такой подход и считаю все эти скобки и точки с запятой синтаксическим шумом, не несущим полезной информации.
Поэтому я предпочитаю подключить к проекту SugarSS
и полностью выкинуть все остальные перпроцессоры. Итак снова наш .bem/make.js
Итак — ставим
1 | $ npm i --save-dev sugarss |
Подключаем
1 | ... |
Итоги
- избавились от устаревших препроцессоров
- поимели PostCSS с возможностью неограниченного расширения с помощью плагинов
- добавили поддержку SugarSS
Комментарии