4 міфу про PostCSS

Ви читаєте переклад статті PostCSS Mythbusting: Four PostCSS Myths Busted.

Коли з'являється новий фронтенд-інструмент, ми завжди запитуємо – а чи потрібен він нам, що нового він може запропонувати? Чи варто витрачати час і зусилля на його вивчення?

З самого початку PostCSS зіткнувся з цікавою проблемою. Люди не розуміли, що це і як його використовувати. Щоб завоювати увагу, PostCSS доводилося змагатися з уже звичними підходами Sass і Less. Це суперництво породило деякі заблужения.

Давайте розвіємо деякі з найбільш частих міфів про PostCSS і подивимося, як з його допомогою можна удосконалити ваш робочий процес.

Якщо ви хочете більше дізнатися про те, що таке PostCSS і як його налаштувати, прочитайте статтю introduction to PostCSS і повертайтеся розвіювати міфи!

Міф 1: PostCSS — це пре — або постпроцесор

Давайте почнемо з, мабуть, самого великого омани, пов'язаного з PostCSS.

Коли PostCSS тільки вийшов, його позиціонували як «постпроцесор». Більшість перших плагінів PostCSS брали звичайний CSS і як-то його поліпшували. Цей підхід відрізнявся від препроцессорного, при якому особливий синтаксис компілюється в звичайний CSS.

Однак, називати PostCSS постпроцессором в деякому роді невірно, оскільки це зменшує його можливості. Я волію називати його просто процесором CSS, так як за допомогою плагінів він може виконувати самі різні завдання і діяти на різних етапах роботи з CSS.

Деякі PostCSS-плагіни беруть особливий синтаксис і переводять його в звичайний CSS, неначе ви працюєте зі звичайним препроцесором начебто Sass. В якості прикладу можна навести postcss-nested, який дозволяє писати вкладені селектори, як це зроблено в Sass і Less. Інші PostCSS-плагіни беруть звичайний CSS і розширюють його, як, наприклад, робить найбільш відомий PostCSS-плагін — Автопрефиксер. Він автоматично додає браузерні префікси в стилі.

Є PostCSS-плагіни, які взагалі ніяк не трансформують ваш CSS. Замість цього вони аналізують ваш код і підказують, як його поліпшити. Наприклад, Stylelint використовується в якості линтера CSS, а Colorguard допомагає виробити єдину колірну палітру в проекті.

На додаток до цього, PostCSS парсити як CSS, так і SCSS-синтаксис (і Less, прим. перекладача). Це означає, що ви можете обробляти PostCSS-плагінами свої
.scss
файли. Про те, як це робиться, ми поговоримо в наступному розділі.

Так що можна розвіяти перший міф — PostCSS це ні пре-, ні постпроцесор. Це процесор CSS, який може обробити або проаналізувати стилі на різних етапах робочого процесу.

Міф 2: PostCSS — альтернатива препроцессорам начебто Sass або Less

Часта помилка серед розробників – спроба порівняти PostCSS з існуючими препроцессорами, начебто Sass або Less.

Я думаю, так сталося через те, що перші PostCSS-плагіни були націлені на підтримку можливостей, властивих препроцессорам: змінних, умовних операторів, циклів і миксинов. Із зростанням PostCSS спільноти виник великий набір плагінів, які представляють нові можливості, які відрізняють PostCSS від препроцесорів.

Тому, хоча ви і можете використовувати PostCSS як альтернативу препроцессорам, ви також можете розширити поточний набір інструментів, додавши нові можливості в свій улюблений препроцесор.

PostCSS підходить для парсингу як CSS, так і SCSS-синтаксису (Less, прим. перекладача), а це означає, що ви можете використовувати PostCSS як до, так і після компіляції Sass. Наприклад, на поточному проекті я використовую PostCSS, щоб прогнати свої Sass-файли через Stylelint перед тим, як компілювати їх в CSS. А після цього отриманий CSS розширюється плагінами начебто Автопрефиксера і postcss-assets, які додають браузерні префікси і вбудовують графіком через data URIs. Так що ваш робочий процес може виглядати приблизно так:

using PostCSS

Загалом, те, як ви будете використовувати PostCSS, залежить від вас. Хочете використовувати його окремим CSS обробником — будь ласка. А якщо вас повністю влаштовує Sass або Less, пам'ятайте, що PostCSS також може працювати пліч-о-пліч з цими інструментами, додаючи можливості, які препроцесор робити не вміє.

Міф 3: PostCSS зробить налаштування складною

Я знаю, про що ви зараз думаєте. Світ фронтенд-інструментів і так занадто великий — навіщо додавати ще один інструмент і робити процес складання більш заплутаним? Питання закономірне, але відповісти на нього вам потрібно самостійно, в залежності від проектів, над якими ви працюєте.

Ви можете використовувати PostCSS, самі того не знаючи. Якщо ви використовуєте Автопрефиксер для додавання браузерних префіксів в CSS, то ви вже використовуєте PostCSS. Автопрефиксер — це PostCSS-плагін, який можна додати в звичайні таск-раннеры начебто Grunt і Gulp через плагіни grunt-postcss або gulp-postcss. Є способи це зробити і для інших інструментів, таких як webpack — подробиці ви знайдете в документації PostCSS.

Якщо ви раніше не використовували ці плагіни для Автопрефиксера, саме час почати. Ви побачите, як просто можна підключити інші PostCSS-плагіни. Наприклад, якщо б я використовував Автопрефиксер з Gulp, мій код виглядав би так:

return gulp.src( ['/**/*.css'] )
// завдання PostCSS для обробки CSS файлів
.pipe( postcss([
autoprefixer({
browsers: [
'> 5%',
'last 2 versions',
'ie > 7'
] 
}) // автоматичні префікси для різних браузерів
... // сюди додаються будь-які інші PostCSS-плагіни
]) )
.pipe( gulp.dest( CSS_DEST_PATH ) );

Як бачите, додаткові плагіни можна просто додати до Автопрефиксеру в будь-який момент, коли ви заходите вбудувати їх у свою роботу.

Якщо з якихось причин ви не використовуєте Автопрефиксер, подивіться на інші доступні плагіни. Кожен проект і кожна команда розробників відрізняються один від одного, і навіть якщо ви просто перегорне список доступних плагінів, ви зможете знайти там щось корисне.

Додати PostCSS в свій робочий процес не складніше, ніж підключити який-небудь плагін Grunt або Gulp. Не нехтуйте цим лише тому, що додається ще один крок складання: якщо цей крок допоможе вам поліпшити роботу з CSS, він вартий того.

Міф 4: PostCSS не пропонує мені нічого, чого не може мій препроцесор

Суть міфу в тому, що PostCSS безпосередньо порівнюють з Sass і Less. А саме, розглядають плагіни, эмулирующие функціональність Sass.

PostCSS сильно виріс за останній рік. З'явилося безліч нових плагінів, і коло можливостей, пропонованих PostCSS, помітно розширився.

Якщо вас все влаштовує в поточному препроцессоре і раніше ви не використовували PostCSS, оскільки він пропонував все те ж саме, варто поглянути на нього ще раз. Такі плагіни як Stylelint, postcss-stats і doiuse можуть забезпечити автоматичний аналіз вашого CSS, чого не запропонує звичайний препроцесор.

Також можна оптимізувати код: наприклад, минифицировать SVG і CSS, надати більш витончені способи зворотної сумісності зі старими браузерами, ніж міксини.

Якщо ви хочете поекспериментувати з CSS Modules, то і тут вам знадобиться PostCSS (так як це просто набір плагінів для PostCSS, прим. перекладача).

Головна річ, про яку варто пам'ятати при роботі з PostCSS — те, що це досі відносно новий інструмент. Поки спільнота росте, буде створюватися більше плагінів, вирішальних цікаві проблеми CSS. Загляньте в каталог доступних плагінів на postcss.parts.

Загалом, PostCSS пропонує безліч унікальних можливостей, доступних іншим препроцессорам. Варто приділити час для того, щоб ознайомитися з ними. Можливо, ви знайдете те, що дозволить вам з легкістю розширити можливості вашого поточного препроцесора.

Разом

PostCSS — це потужний інструмент обробки CSS, який може поліпшити робочий процес будь-якого фронтенд-розробника. Він швидко вбудовується в роботу і пропонує зручні способи роботи з CSS, препроцессорами і написанням коду.

Якщо ви раніше розглядали PostCSS і знехтували ним з якихось причин, я рекомендую вам переглянути свої погляди. Це інструмент, здатний поліпшити будь-який процес фронтенд-розробки.

Автор: Ashley Nolan
джерело: http://www.sitepoint.com/postcss-mythbusting/

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.