Постпроцессоры CSS для начинающих: советы и ресурсы

Предварительная обработка CSS – это концепция, о которой большинство веб-разработчиков уже узнали или прочитали. Мы подробно рассмотрели предварительную обработку CSS, чтобы помочь разработчикам быстрее освоить эту распространенную технологию. Но как насчет постпроцессоров?

Эти относительно новые инструменты похожи в том смысле, что они влияют на рабочий процесс веб-разработки, однако они работают на другой стороне разработки CSS («пост-разработка»).

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Начало работы с Sass

Пост против предварительной обработки
Революция предварительной обработки произошла, когда Sass / LESS вышли на сцену. Эти инструменты позволяют разработчикам использовать переменные, циклы, функции и миксины в CSS. Это почти делает базовую разработку CSS похожей на язык программирования с расширенной функциональностью.

Постобработка происходит после того, как вы уже создали простой CSS и хотите расширить его за счет автоматизации. Это может включать расширение селекторов класса или автоматическое добавление префиксов для определенных свойств CSS.

Вообще говоря, предварительная обработка имеет свои языки стилей, такие как пререкаться а также МЕНЬШЕ, которые конвертируются в чистый CSS. Постобработка берет этот базовый CSS и применяет автоматизацию / повторение.
ИЗОБРАЖЕНИЕ: Medium.comВот цитата из после который также является источником изображения выше. Я думаю, что автор Стефан Баумгартнер блестяще резюмирует разницу.

«[Preprocessors] возьмите язык, который компилируется в CSS. А также [Postprocessors] выровняйте и обновите CSS, чтобы получить наилучший результат для современных браузеров ».

В некотором смысле, оба они кажутся инструментами автоматизации, просто работают по-разному. Например, общая проблема, решаемая с помощью постобработки, заключается в автоматическом добавлении префиксов для новых свойств CSS3.

Но это также может быть сделано в Sass с расширениями. Так есть ли разница? Вот еще одна замечательная цитата из того же поста:

«Препроцессоры» и «постпроцессоры» не существуют. Это процессоры CSS, заботящиеся как об авторских, так и о оптимизационных функциях.

Хотя это может быть правдой в теоретическом смысле, сообщество веб-разработчиков все еще создает разрыв между этими инструментами. По этой причине я настоятельно рекомендую фронтенд-разработчикам хотя бы прочитать о постпроцессорах и узнать, что они могут сделать.
Добавьте пост-обработку в ваш рабочий процесс
Почти все ссылки PostCSS как окончательный ресурс для постобработки. Однако команда PostCSS открыто признала в Твиттере чтобы изменить их название, потому что словосочетание больше не имеет смысла.

PostCSS больше не просто инструмент до CSS или после CSS. Это может реально работать в обеих областях! Это также объясняет цитату из предыдущего заявления о том, что все инструменты CSS сводятся к одному – обработке.
PostCSS использует плагины JavaScript для автоматизации вашего рабочего процесса CSS, и вы даже можете написать свой собственный плагин JS для расширения библиотеки PostCSS. Если вы хотите начать с PostCSS, проверьте это вводный учебник на Smashing Magazine. Если вы уже используете и понимаете Sass, вы быстро освоите Post CSS.

Читайте также: 10 великолепных плагинов PostCSS, которые сделают вас мастером CSS

Чтобы создать свой собственный рабочий процесс до / после обработки CSS, начните с составления списка ваших болевых точек, таких как:

автоматический префикс CSS-градиентов
автоорганизация для правил CSS
добавление полифилов для определенных свойств
создание размеров изображения для фоновых изображений

Обратите внимание, что все эти вещи могут быть выполнены как до, так и после обработки. Важно понимать, что предварительная / постобработка CSS быстро объединяется в одно и то же.

Вместо того, чтобы разбивать ваши цели на разные этапы обработки, лучше перечислить их как цели, а затем искать нужные инструменты.
Лучшие инструменты постобработки
Я старался не упоминать расширения в этом разделе, так как у Sass & PostCSS есть из чего выбирать. Честно говоря, вы могли бы обойтись только с этими библиотеками, но я также хочу предложить несколько альтернатив для более конкретных решений.
Pleeease
Если вы уже работаете с Node.js, то Pleeease кажется очевидным выбором. Он имеет много типичных функций обработки CSS, таких как импорт файлов, переменные / функции, автоматическое минимизация и резервная поддержка для более новых элементов, таких как SVG.
На сайте также есть интерактивная площадка для тех, кто хочет попробовать библиотеку в Интернете, не загружая копию локально.
благословить
Я помню, когда Internet Explorer 6 был еще неприятностью, и приятно знать, что разработка IE улучшилась – но не намного. Хотя я хотел бы сказать вам, что использование IE в основном прекратилось, это просто не похоже на правду,

К счастью, Благослови CSS это решение, которое выявляет потенциальные проблемы с IE в вашем CSS и создает решения с последующей обработкой. Он работает на Node.js, поэтому хорошо вписывается в типичный рабочий процесс NPM / Gulp.
CSSNext
Вот действительно классная библиотека, которая позволяет вам создавать CSS с более продвинутыми функциями, которые в настоящее время не поддерживаются. CSSNext библиотека включает поддержку нечетных функций CSS4, таких как серый(), которые в настоящее время присутствуют только в черновиках W3C.
Я не думаю, что каждому разработчику понадобится эта библиотека. Он очень специфичен и не решает повседневных задач, однако может дать вам представление о будущих спецификациях CSS4 при преобразовании синтаксиса в современный CSS3.
Stylecow
Если поддержка браузера является проблемой для вас, то Stylecow это необходимость. Эта мощная библиотека позволяет разрабатывать CSS только для вашего любимого браузера. Затем вы можете запустить инструмент командной строки через Node, и ваш CSS будет обновлен для всех браузеров, которые вы хотите поддерживать.

Вы можете скачать Stylecow от GitHubи это идет с некоторыми невероятно подробными документация,
-prefix-бесплатно
Наконец, я хочу поделиться -prefix-бесплатно библиотека, которая также является любимым инструментом для разработки CSS, поскольку она позволяет использовать свойства CSS без префиксов. Каждый хочет использовать современные свойства CSS, такие как анимация и градиенты, но никто не хочет копировать / вставлять подробный код вручную.

С этим плагином вам даже не нужно запускать свой CSS через постпроцессор на вашем компьютере. Он также может работать как браузер, который запускается на компьютере пользователя для автоматического обновления файлов CSS.
Autoprefixer, которая является частью библиотеки PostCSS, вероятно, даже лучший выбор для локальной пост-обработки. Вот почему я говорил ранее, что если вы используете LESS или Sass вместе с PostCSS, у вас будет все, что вам нужно для впечатляющего рабочего процесса разработки CSS.
Завершение
Постобработка – это скорее ловкая фраза, чем реальная технология, хотя она имеет свое место в рабочем процессе CSS, так как весь процесс написания современного CSS был значительно улучшен этими инструментами. Я могу только рекомендовать разработчикам копать глубже, чтобы найти то, что лучше всего подходит для них.

Если вам нужна дополнительная информация о пост-обработке, взгляните на следующие статьи:

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>