Если Вам, на самом деле нужно узнать что-то о PostCss, то давайте скорее приступим и узнаем, как его можно использовать.
В этой серии уроков, мы постараемся погрузиться максимально глубже и узнать основные пути, как мы можем использовать PostCss. Если вы еще не поняли, на что способен PostСss, то будьте готовы к новому и прекрасному миру CSS.
Вступление
Как Вы видите на графике, популярность PostСss, растет с головокружительной скоростью. Все больше людей начинает понимать, что предлагает PostСss, наслаждаясь "моментом просветления", они понимают, как они могут использовать его в своих проектах.
В 2014 г. насчитывалось, чуть больше 1..4млн загрузок за год, но начиная с Января по Июнь 2015 года, уже было больше 3.8млн загрузок.
Autoprefixer, весьма популярный плагин PostCSS, он использвался в Google, Shopify, Twitter, Bootstrap и CodePen. WordPress, также использует Autoprefixer, а также RTLCSSplugin. Также Alibaba использует несколько PostCSS плагинов, для собственных разработок, а также для содействует для разработки других проектов.
Помимо этого, Марк Отто, говорил, что в 5ой версии Bootstrap, будет написан на PostCss.
Кстати, Bootstrap 4, будет на SCSS. Bootstrap5, будет на PostCss звучит заманчиво!
— Mark Otto (@mdo) April 23, 2015
PostCss, уже встроен в виртуальную среду для тестов Codepen.io и может быть использован, нужно только изменить соответсвующие настройки.
Одним словом, PostCss растет быстро, и на это есть хорошие причины.
PostCss в двух словах
Так что же такое PostCss? Лучше описание, которое приходит с проекта на ГитХабе:
PostCss, это инструмент, для изменения Css с помощью Яваскрипт. Различные плагины, могут поддерживать переменные и миксины, транслировать новый синтаксис "css 4", встроенные картинки и многое многое другое, на что способен PostCss.
В двух словах, PostCss берет CSS и превращает в вид данных, которые можно изменять с помощью Яваскрипт. Основанные на Яваскрипт плагины, позволяют изменять код. PostCss сам по себе ничего не изменяет, он всего лишь прокладывает путь для плагинов, которые делают изменения и траснформации для которого они созданы.
Практически не существует ограничений в манипуляции плагинами для PostCss, которые можно применить к CSS. Если вы можете подумать о чем либо, то это можно сделать с помощью плагинов для PostCss.
Плагины PostCss, могут вести себя как препроцессоры: могут оптимизировать и добавлять префиксы в код, могут добавлять синтаксис из будущих спецификаций, могут выполнять проверку, могут производить переменные и логику, можно создавать сетки...этот список очень длинный и разнообразный.
Чем не является PostCss
Тот факт, что вы можете делать все что угодни с PostCss плагинами, в сочетании с тем, что PostCss является относительном "свежим созданием", приводят к заблуждению и недопониманию, что он из себя представляет на самом деле.
Многие люди,(включая меня), имели не полное представление о том, что такое PostCss, и поэтому я упустил, истинное предназначение этого инструмента.
Поэтому, прежде, чем мы пойдем дальше, давай проясним, чем не является PostCss.
PostCss это не препроцессор.
Много разработчиков, сказали, что отказываются от препроцессоров в пользу PostCss. В то же время, другие отдают свои предпочтения препроцессорам и им не нравится PostCss. Однако PostCss не препроцессор.
Да, вы конечно же можете его использовать в качестве препроцессора, но вы также можете использовать его функции, не как препроцессора. Вы даже можете использовать свой любимый препроцессор в соединении с PostCss.
PostCss - это не пост-процессор
PostCss имеет в своем составе слово пост, но на самом деле это не пост-обработка. Пост-обработка, обычно рассматривается как "приемка" готовых стилей, таких как валидный css синтаксис и обработка с добавлением вендорных префиксов. Тем не менее, PostCss не ограничивается только обработкой или как это кажется на первый взгляд. Как упоминалось раннее, он может вести себя также, как и препроцессор.
Это лучшее, что можно подумать о PostCss...like препроцессор. Как сказал Андрей Ситник в своем твиттере, создатель PostCss:
Настало время признать свои ошибки. Термин "препроцессор", было плохой идеей. Команда PostCss перестала использовать это значение. https://t.co/vs2AiXGoJy
— PostCSS (@PostCSS) July 28, 2015
А также, внесший большой вклад в разработку плагинов, Максим Тируин, описал в своем твиттере: PostCss, чаще подразумевает не пост обработку, а как смысл самого CSS или даже больше, чем смысл.
Никто из разработчиков внесших вклад в развитие проекта, не используют это выражение. PostCss сегодня - это как до и за пределами CSS.
— Maxime Thirouin (@MoOx) July 21, 2015
PostCss это не синтаксис будущего.
Существует несколько прекрасных плагинов PostCss, которые позволяют писать код из будущих спецификаций, но пока, мало кто пользуется этими возможностями. Однако, сам по себе PostCss, не поддерживает синтаксис будущего.
Некоторые разработчики, неохотно используют PostCss, объясняя это тем, что они не чувствуют себя комфортно при написании "синтаксиса будущего". Однако, написание "синтаксиса будущего", это только один из множества путей, как можно использовать PostCss.
Если вы хотите, то вы можете использовать PostCss, который перевернет ваше представления о процессе разработки, даже без написания одной строчки кода.
PostCss - это не чистка кода или оптимазация кода.
Успех плагина Autoprefixer, привело к тому, что PostCss стали воспринимать как оптимизатор и "чистильщик" кода, который ускоряет скорость разработки и и добавляет кросс-браузерность(префиксы) по умолчанию. Такое ошибочное понимание, было и у меня, пока я не научился огромному количеству других вещей, которые дает PostCss.
Да, существует много замечательных плагинов, которые предлагают чистку кода и оптизацию процесса, но это всего лишь малая толика из того, что он предлагает.
PostCss - это не какая то одна вещь.
Важно знать, что PostCss на зацикливается на какой то одной операции, он представляет целый комплекс кастомных решений, функционалность которых практически не имеет предела.
Рассмотрим например плагин для Вордпресс. Е-commerce плагины очень популярны, но никто не считает двидок Вордпресс как часть коммерции, и также заслуга самого Вордпресс, не оценена в разработки е-коммерции.
В случае с PostCss, мне нравится думать о нем, как о хлебе, т.е. это всего лишь ингридент, из которого вы можете приготовить вкусный сэндвич. Сам по себе PostCss, не кажется чем то сверхественным, но то, что он способен(с помощью плагинов), позволяет заполнить практически все аспекты разработки. Это дает бесконечные возможности, которые просто могут создавать что то удивительное.
Попробовал сэндвич с арахисовым маслом м не понравилось? Это не повод, обвинять хлеб, что все сэндвичи будут ужасны. Вместо этого, давайте перейдем к следующем удивительным вещам, которые могут стать частью вашей обычной жизни.
Что делает PostCss особенным.
PostCss - это совершенно другой подход к CSS. Фронт-энд разработчик из Лондона, описал его, как "Швейцарский армейский нож", и это совершенно точное описание.
Давай посмотрим, на несколько вещей, что делает PostCss особенным.
Его экоситема плагинов, предлагает различную функциональность.
PostCss - это длинный список плагинов, на все случаи жизни. Когда вы прочтете список доступных плагинов на ГитХаб, вы обнаружите столькое количество функциональности, которые могут вместится вместе.
Вот некоторые из них, которые позволяют применять цветовые решения, конические градиенты, кастомные свойства, кастомные селекторы, кастомные имена для медиазапросов и многое многое другое.
На данный момент, существует несколько фоллбэк плагины, которые позволяют использовать современный код, для устаревших браузеров, например использование относительных единиц, rgba() цветов, конвертирование псевдоэлементов.
Также доступны более 20 языков расширений, включая миксины, переменные, условия для каждой "петли", также включены стили БЭМ и SUIT и многие другие.
Плагин по работе с цветами, позволяет конвертировать из одного цветового формата в другой, также можно изменять альфа насыщенность, комбинировать цвета, генерировать цветовые схемы.
Также есть плагины для создания любых сеток, оптимизатор, плагин который создает необходимые шорткаты, линтеры и другие аналитические инструменты.
Невозможно вместить в один параграф, многообразие существующих плагинов и их растущее количество, по ссылке, вы можете просмотреть весь список.
Он модульный: т.е. используйте только то, в чем вы нуждаетесь.
Другая сторона PostCss, то что вы можете использовать все их одновременно или какие то определенные, подходящие под вашу задачи.
Просто хотите использовать PostCss, чтобы сделать ваш css более эффективным и кросс-браузерным? Загрузите несколько плагинов для оптимизации и вперед!
Хотите использовать PostCss как препроцессор? Просто используйте некоторые плагины вместо использования языка и все готово.
Философия PostCss - это модульность, которая позволяет обрабатывать множественные функции. Т.е. для каждой операции можно использовать отдельный модуль, что ускоряет скорость разработки. Вместо этого, плагины создаются в функции, и оттуда они собираются в "набор плагинов" с различной функциональностью.
Например, вы можете вручную собрать набор плагинов в образ и создать свой собственный препроцессор. Или как альтернативы, вы можете скачать PreCss плагин, который вам автоматом даст доступ, к нескольком плагинам.
Какой бы вы путь ни выбрали используя PostCss, вы можете выбрать только нужные вам плагины из набора, не устанавливая остальной не нужный хлам.
PostCss быстрее в 3 раза, чем остальные известные "препроцессоры."
Существуют 2 причины, быстроты тестов бенчмарк. Первое - это то, что вам всего лишь надо его загрузить и второе - это то, что он работает на яваскрипт.
Вы можете попробовать эти тесты сами пройдя по ссылке ниже: https://github.com/postcss/benchmark
Результат одного из тестов, это парсинг, вложеные правила, миксины, переменные и math:
PostCSS: 36 msRework: 77 ms (2.1 times slower)libsass: 136 ms (3.8 times slower)Less: 160 ms (4.4 times slower)Stylus: 167 ms (4.6 times slower)Stylecow: 208 ms (5.7 times slower)Ruby Sass: 1084 ms (30.1 times slower)
Вы также можете создать свой собственный плагин, на любой случай
Плагины для PostCss, написаны на яваскрипт, и любой кто умеет писать на этом языке, может создать свой собственный плагин, для своих нужд. Чтобы дать вам представление как это возможно, я например, не считаю себя крутым яваскрипт разработчиком, но после подробного анализа PostCss, я за несколько часов написал свой первый плагин.
Препроцессоры, такие как SASS, Stylus и Less, делают достаточно хорошо свою работу, но они не могут делать все. Они решают за пользователя, какие функции им могут быть полезны. Если вам нужна какая то новая функция, то вы конечно можете сделать запрос, как оно и делается в принципе, но это требует времени и не всегда разработчики могут воплотить в реальность ту или ину запрашиваемую вами функцию, все зависит от спроса.
Даже если вы сделаете запрос на какую то функцию, то не факт, что волонтеры любители, будут иметь время для создания нужной вам фичи. Одним словом, если вы не обладаете мастерством создания нужного функционала, то я скажу вам, что вы неудачник.
С PostCss вы не должны никого спрашивать. Если вам нужна функциональность, вперед и сделайте сами. Из моего опыта знания яваскрипт, позволяет создать PostCss плагин, которым смогут управлять другие разработчики.
В дальнейшем, в одном из уроков, будет показан пример создания собственного плагина. Даже, если вы не эксперт в яваскрипт, то я думаю, вы все равно сможете создать простой плагин, это вполне достижимо.
Вы также можете использовать с обычным css.
Большая часть PostCss, не требует кастомного синтаксиса, что типично для препроцессоров. Скорее, они могут быть применены к обычному css. Это означает, что вы можете использовать PostCss с любым css файлом вместе, например для редактирования стилей или совсем для другого проекта, такого как например NORMALIZE.css
Это также означает и то, что вы не должны "выпадать" из других проектов, таких как SASS, Stylus или Less, потому что, вы всегда можете применить PostCss для обработки css Например, если использовать Foundation через SASS, вы можете выполнить оптимизацию и использовать "будущий синтаксис" после создания вашего css файла.
Библиотеки PostCss не привязаны к одному препроцессору.
Мы также начинаем видеть многие библиотеки написанные на PostCss, которые в прошлом были написаны на Stylus, Sass или LESS.
Например Cory Simmons, изначально занимался поддержкой Stylus и Sass для его Lost Grid системы, так что пользователи имели доступ к его творению. Впоследствии он портировал свой проект на PostCss, что означает, что сейчас каждый может использовать Lost, включая Stylus, Sass пользователей и не только, также пользователи Less и люди которые вообще не использовали препроцессоры.
PostCss быстро интегрируется в популярные инструменты.
Будучи основанным на яваскрипт, PostCss не нуждается в установке Ruby, он имеет уже готовую систему для разработки.
- Такие плагины как: Grunt, Gulp, webpack, Broccoli, Brunchand ENB.
- CodePen также позволяет тестировать PostCss.
- Prepros был встроен в автопрефиксер и cssnext плагины.
- postcss-use позволяет легко загрузить другие плагины, с простым правилом @ в вашем css
- Вы можете использовать package.json файлы использующие команду npm, которая атоматически установит нужный PostCss плагин. Это облегчает обмен PostCss проектами, несмотря на огромное количество возможных вариации плагинов.
Окей, пройдем к моменту, как мы можем быстро начать использовать PostCss.
Подведем итоги:
Первое, что нужно знать о PostCss, что он стремительно набирает обороты и причем не зря, поэтому сейчас настал момент ясности и понимания, как мы можем использовать этот замечательный инструмент.
В этом вступлении, мы выяснили, чем PostCss не является:
- Это не препроцессор, хотя опционально он похож своим поведением на него.
- Это не пост-процессор, хотя опять таки, он походит своим поведением на него.
- Это не "синтаксис будущего", хотя имеет эту функцию.
- Это не чистка и не оптимизатор кода, хотя он может делает прекрасено и первое и второе.
- Эт не какая то одна вещь, это значит, потенциально не ограниченные возможности и функциональсть, которые вы сами создаете.
Мы также раскрыли, что делает PostCss особенным:
- Различная функциональность, доступная через экосистему плагинов.
- Это модульность, используй то, что тебе нужно.
- Это быстрая скорость компиляции.
- Доступность создания своих собственных плагинов.
- Возможность использования с обычным css кодом.
- Возможность создавать библиотеки, не зависящие от какогог либо препроцессора
- Органиченое внедрение в разработку с другими популярными инструментами
Скоро "Погружение в PostCss"
В этой серии уроков, мы шаг за шагом, будем изучать PostCss уроки:
- Быстрый старт
- Установка, настройка Gulp
- Настройка Grunt
- Анализ существующих плагинов.
Также мы рассмотрим, различные пути, как мы можем использовать PostCss
- Кросс-браузерная совместимость
- Минификация и оптимизация кода
- Препроцессинг с PreCSS
- Создаем свой собственный препроцессор
- Совместная разработка с Stylus / Sass / LESS
- БЭМ и SUIT методология
- Шорткаты и сокращения
- Разнообразные сладости PostCss
И наконец, мы будем создавать свой собственный плагин PostCss.
Вы могли заметить, насколько мало существует уроков по использованию фичи в PostCss, называемой cssnext, (которая позволяет использовать "синтаксис будущего") особенно учитывая тот факт, что многие люди, считают его пост-обработкой.
Причина этого отсутствия является, продолжающаюся разработка cssnext, лидирующий проект, который все еще трансформируется и находится на стадии шлифовки. Таким образом, мы будем приглядывать за ним и публиковать свежие уроки по мере их выхода в свет.
Итак, приступим! В следующем уроке, будет вступление, "Быстрый старт" и будет показано как мы можем использовать PostCss. Увидимся здесь!
