Постпроцессоры CSS для начинающих Советы и ресурсы
Предварительная обработка CSS это концепция, о которой большинство веб-разработчиков уже узнали или прочитали. Мы подробно рассмотрели предварительную обработку CSS, чтобы помочь разработчикам освоить эту распространенную технологию. Но что насчет постпроцессоры?
Эти относительно новые инструменты похожи в том смысле, что они влияет на рабочий процесс веб-разработки, Однако они работают на другая сторона разработки CSS (“сообщение” разработка).
В этом посте я хотел бы представить основы постобработки, как это работает, почему вы используете его, и поделитесь несколькими библиотеками / инструментами, которые вы можете использовать для пост-обработки вашей игры CSS.
Пост против предварительной обработки
революция предварительной обработки случилось когда Sass / LESS попали на сцену. Эти инструменты позволяют разработчикам использовать переменные, циклы, функции и миксины в CSS. Это почти делает базовую разработку CSS похож на язык программирования с расширенной функциональностью.
Постобработка происходит после того, как вы уже создали простой CSS, и хотите продлить его дальше через автоматизацию. Это может включать расширяющие классы селекторов, или же автоматически добавляемые префиксы для определенных свойств CSS.
Вообще говоря, предварительная обработка имеет свои собственные языки таблиц стилей, такие как Sass и LESS, что конвертировать в чистый CSS. Постобработка берет этот основной CSS, и применяет автоматизацию / повторение.
Вот цитата из поста, который также является источником изображения выше. Я думаю автор Стефан Баумгартнер суммирует разницу блестяще.
В некотором смысле, оба они кажутся инструментами автоматизации, просто работают по-разному. Например, общая боль, решаемая постобработкой, заключается в автоматическое добавление префиксов для новых свойств CSS3.
Но это также можно сделать в Sass с расширениями. Так есть ли разница?? Вот еще одна замечательная цитата из того же поста:
Хотя это может быть правдой в теоретическом смысле, сообщество веб-разработчиков все еще создает разрыв между этими инструментами. По этой причине я настоятельно рекомендую фронтенд-разработчикам хотя бы прочитать о постпроцессорах и узнать, что они могут сделать..
Добавьте пост-обработку в ваш рабочий процесс
Почти все ссылки PostCSS как окончательный ресурс для постобработки. Однако команда PostCSS открыто призналась в Twitter меняя название потому что словоблудие уже не имеет смысла.
PostCSS больше не просто инструмент до CSS или после CSS. Это может на самом деле работа в обеих областях! Это дополнительно объясняет цитату из предыдущего заявления о том, что все инструменты CSS сводятся к одному - обработка.
PostCSS использует плагины JavaScript для автоматизировать ваш рабочий процесс CSS, и вы даже можете написать свой собственный плагин JS для расширения библиотеки PostCSS. Если вы хотите начать работу с PostCSS, ознакомьтесь с этим вводным руководством по журналу Smashing Magazine. Если вы уже используете и понимаете Sass, вы быстро освоите Post CSS.
Чтобы создать собственный рабочий процесс до / после обработки CSS, начните с составление списка ваших болевых точек, такие как:
- автоматический префикс CSS-градиентов
- автоорганизация для правил CSS
- добавление полифилов для определенных свойств
- создание размеров изображения для фоновых изображений
Обратите внимание, что все эти вещи можно сделать как до, так и после обработки. Важно понимать, что предварительная / постобработка CSS быстро превращается в одно и то же.
Вместо того, чтобы разбивать ваши цели на разные этапы обработки, лучше перечислите их как цели, затем пойти на искать правильные инструменты.
Лучшие инструменты постобработки
Я постарался не упоминать расширения в этом разделе, так как у Sass & PostCSS есть из чего выбирать. Честно говоря, вы могли обойтись только с этими библиотеками, но я также хочу предложить некоторые альтернативы для более конкретных решений.
Pleeease
Если вы уже работаете с Node.js, то Pleeease кажется очевидным выбором. У него много типичные возможности CSS-обработки, такие как импорт файлов, переменных / функций, автоматическое минимизация и резервная поддержка для более новых элементов, таких как SVG.
На сайте также есть интерактивная площадка для тех, кто хочет попробовать библиотеку онлайн, не загружая копию локально.
благословить
Я помню, когда Internet Explorer 6 был еще неприятностью, и приятно знать, что разработка IE улучшилась - но не намного. Хотя я хотел бы сказать вам, что использование IE в основном прекратилось, это просто не похоже на правду.
К счастью, Bless CSS это решение, которое обнаруживает потенциальные проблемы, связанные с IE в вашем CSS, и создает решения с пост-обработкой. Он работает на Node.js, поэтому хорошо вписывается в типичный рабочий процесс NPM / Gulp..
CSSNext
Вот действительно классная библиотека, которая позволяет вам создать CSS с более продвинутой функциональностью это в настоящее время не поддерживается. Библиотека CSSNext включает в себя поддержка нечетных функций CSS4, такие как серый(), которые в настоящее время присутствуют только в черновиках W3C.
Я не думаю, что каждому разработчику понадобится эта библиотека. Он очень специфичен и не решает повседневные проблемы, однако может дать вам вкус будущих спецификаций CSS4 при конвертации синтаксиса в современный CSS3.
Stylecow
Если поддержка браузера это проблема для вас, тогда Stylecow это необходимость. Эта мощная библиотека позволяет разрабатывать CSS только для вашего любимого браузера. Затем вы можете запустить инструмент командной строки через Node, и ваш CSS будет обновлен для всех браузеров, которые вы хотите поддерживать.
Вы можете скачать Stylecow с GitHub, и он поставляется с невероятно подробной документацией.
-префиксов бесплатно
Наконец, я хочу поделиться -префиксов бесплатно библиотека, которая также является любимым инструментом для разработки CSS, так как позволяет использовать нефиксированные свойства CSS. Каждый хочет использовать современные свойства CSS, такие как анимация и градиенты, но никто не хочет копировать / вставлять подробный код вручную.
С этим плагином вам даже не нужно запускать свой CSS через постпроцессор на вашем компьютере. Он также может работать как браузер, который запускается на компьютере пользователя для автоматически обновлять файлы CSS.
Autoprefixer, который является частью библиотеки PostCSS, возможно, даже лучший выбор для локальная постобработка. Вот почему я сказал ранее, что если вы используете LESS или Sass вместе с PostCSS, то у вас будет все необходимое для впечатляющего рабочего процесса разработки CSS.
Завершение
Постобработка - это скорее ловкая фраза, чем реальная технология, хотя она имеет свое место в рабочем процессе CSS, так как весь процесс написания современного CSS был значительно улучшен этими инструментами. Я могу только рекомендовать разработчикам копать глубже, чтобы найти то, что лучше всего подходит для них.
Если вам нужна дополнительная информация о пост-обработке, взгляните на следующие статьи:
- Что спасет нас от темной стороны препроцессоров CSS?
- Взгляд на написание будущего CSS с PostCSS и cssnext
- Предварительная обработка CSS (SASS или LESS) против постобработки CSS
