CSS пост-процесори за начинаещи Съвети и ресурси
Предварителна обработка на CSS е концепция, която повечето уеб разработчици вече са научили или четат. Ние обсъдихме прецизната обработка на CSS в подробности, за да помогнем на разработчиците да се справят с тази преобладаваща технология. Но какво ще кажеш постпроцесори?
Тези относително нови инструменти са подобни в смисъл, че те повлияе на работния процес в уеб разработката, въпреки това те работят на друга страна на развитието на CSS (“пост” развитие).
В този пост бих искал да ви представя основи на последваща обработка, как работи, защо да го използвате и споделяте няколко библиотеки / инструменти, които можете да използвате, за да увеличите своята CSS игра с последваща обработка.
Пост срещу предварителна обработка
Най- революция в предварителната обработка случи се, когато Sass / LESS удари сцената. Тези инструменти позволяват на разработчиците да използват променливи, цикли, функции и миксини в CSS. Това почти прави основната разработка на CSS подобен на език за програмиране с разширена функционалност.
Последваща обработка се случва след като вече сте произвели обикновения CSS и искате да го направите продължете чрез автоматизация. Това може да включва разширяване на селекторите за клас, или автоматично добавяне на префикси за някои CSS свойства.
Най-общо казано, предварителната обработка има своя собствени езици за стилове, като Sass и LESS, това конвертирате в чист CSS. Последващата обработка взема този основен CSS, и прилага се автоматизация / повторение.
Ето цитат от публикация, която също е източник на изображението по-горе. Мисля, че авторът Стефан Баумгартнер обобщава разликата блестящо.
В известен смисъл и двете изглеждат като инструменти за автоматизация, които просто работят по различни начини. Например, обичайната болка, решена чрез последваща обработка е да автоматично добавя префикси за по-новите свойства на CSS3.
Но това може да се направи и в Sass с разширения. Така че наистина има ли разлика? Ето още една голяма цитат от същата публикация:
Въпреки че това може да е вярно в теоретичен смисъл, общността на уеб разработчиците все още създава разделение между тези инструменти. Поради тази причина силно бих препоръчал на разработчиците да четат поне за пост-процесорите и да знаят какво могат да направят.
Поставете последваща обработка във вашия работен процес
Почти всички споменават PostCSS като окончателен ресурс за последваща обработка. Въпреки това екипът на PostCSS открито призна в Twitter промяна на заглавието защото словесното слово вече няма никакъв смисъл.
PostCSS вече не е само предварително CSS или post-CSS инструмент. Всъщност може работа в двете области! Това допълнително обяснява цитата от по-рано, че всички CSS инструменти се свеждат до едно нещо - обработване.
PostCSS използва JavaScript плъгини автоматизирайте работния си процес в CSS, можете дори да напишете свой собствен JS плъгин, за да разширите библиотеката PostCSS. Ако искате да започнете с PostCSS проверете това интро урок за Smashing Magazine. Ако вече използвате и разбирате Sass, тогава ще вземете Post CSS бързо.
За да създадете свой собствен работен поток за обработка преди / след CSS, започнете от съставяне на списък на вашите точки на болка, като:
- автоматично префиксиране на CSS градиенти
- авто-организация за CSS правила
- добавяне на полифункции за определени свойства
- генериране на размери на изображението за фонови изображения
Имайте предвид, че всички тези неща могат да бъдат направени както преди, така и след обработка. Важно е да осъзнаем, че CSS pre / post обработката бързо се слива, за да стане едно в едно и също нещо.
Вместо да разбиете целите си на различни етапи на обработка, по-добре е избройте ги като цели, след това отидете на a търсене на подходящите инструменти.
Най-добри инструменти за последваща обработка
Опитах се да избягвам да споменавам разширенията в този раздел, тъй като 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, и тя идва с невероятно подробна документация.
-префикс без
Накрая искам да споделя -префикс без библиотека, която също е любим инструмент за развитие на CSS, както ви позволява използвайте префикс CSS свойства. Всеки иска да използва модерни CSS свойства, като анимации и градиенти, но никой не иска да копира / поставя подробен код.
С този плъгин дори не трябва да пускате CSS чрез постпроцесор на вашия компютър. Тя може да работи и като браузър, който работи на компютъра на потребителя автоматично актуализира CSS файловете.
Autoprefixer, който е част от PostCSS библиотеката, вероятно е дори по-добър избор локална последваща обработка. Ето защо казах преди, че ако използвате LESS или Sass заедно с PostCSS, ще имате всичко необходимо за един впечатляващ работен процес за CSS развитие..
Обобщавайки
Последващата обработка е по-скоро фраза на улова, отколкото на истинска технология, въпреки че тя има своето място в работния процес на CSS, като целият процес на писане на модерни CSS е драматично подобрен от тези инструменти. Мога само да препоръчам на разработчиците да копаят по-дълбоко, за да намерят най-подходящото за тях.
Ако търсите още повече информация за последващата обработка, прегледайте тези свързани статии:
- Какво ще ни спаси от тъмната страна на предварителните процесори на CSS?
- Поглед към писането на бъдещи CSS с PostCSS и cssnext
- CSS Preprocessing (SASS или LESS) срещу CSS Postprocessing
