Постпроцесори css для початківців поради та ресурси

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

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

Постпроцесори або препроцесори

З появою Sass / LESS відбулася революція в препроцесорів. Ці інструменти дозволяють розробникам використовувати змінні, цикли, функції і міксини в CSS коді. Стандартний CSS перетворюється в майже повноцінна мова програмування з розширеним функціоналом.

Після написання CSS коду в справу вступає постпроцесінг, що автоматизує код. Це може бути розширення селекторів класів або автоматичне додавання Вендорний префіксів до певних властивостей.

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

Нижче я навів цитату з поста, звідки також взято це зображення. Я думаю, Стефан Баумгартнер чудово пояснює різницю. «Препроцесорів використовують мову, який компілюється в CSS. А постпроцесори реставрують CSS код так, щоб він працював найкращим чином в сучасних браузерах. »

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

Однак те ж саме можна зробити в Sass за допомогою розширень. Так в чому ж різниця? Ось ще одна хороша цитата з того поста: «Не буває препроцесорів і постпроцесорів. Все це CSS процесори, які відповідають за написання і оптимізацію. »

Чисто теоретично, в цьому є сенс, але співтовариство розробників поки що продовжує розділяти два інструменти. З цієї причини раджу front-end розробника хоча б прочитати про постпроцесори і знати, що з їх допомогою можна робити.

підключаємо постпроцесор

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

PostCSS більше не просто пре-або постпроцесор. Він працює в обидві сторони! Це пояснює цитату, яку ми бачили вище, що все CSS інструменти зводяться до одного - до процесорів.

PostCSS використовує JS плагіни для автоматизації процесу роботи з CSS. Ви навіть можете писати свої JS плагіни і розширювати бібліотеку PostCSS. Якщо хочете ознайомитися з PostCSS, пройдіть вступний урок на Smashing Magazine. Якщо ви вже знаєте, що таке Sass, то ви швидко розберетеся.

Щоб побудувати свій робочий процес по пре- або постпроцесингу, спочатку створіть список проблем:

автоматичне додавання префіксів в CSS градієнтах;

автоматична організація CSS правил;

вставка поліфілії для окремих властивостей;

генерація розмірів зображень для фону.

Зверніть увагу, що все це можна вирішити як в препроцесорів, так і в постпроцесор. Важливо зрозуміти, що пре- і постпроцесінг в CSS швидко зливається в одне.

Чи не розбивайте мети на різні етапи обробки, краще складіть список цілей і підбирайте під них правильні інструменти.

ТОП постпроцесорів

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

Якщо ви працюєте з Node.js, вам не обійтися без Pleeease. У ньому багато стандартних функцій по обробці CSS, таких як імпорт файлів, змінні / функції, автоматична мініфікація, а також підтримка фолбеков для нових елементів типу SVG.

На сайті є інтерактивний майданчик, де можна спробувати бібліотеку онлайн без завантаження.

Я пам'ятаю часи, коли IE6 був повною засідкою. Приємно розуміти, що розробка під IE стала краще, але не набагато. Я був би щасливий повідомити вам, що IE повністю вийшов з обороту, але це не так.

На щастя, є Bless CSS - спеціальний інструмент, який визначає можливі проблеми з IE в стилях і створює рішення за допомогою постпроцесингу. Bless працює на Node.js і добре підходить під NPM / Gulp.

Дуже крута бібліотека, за допомогою якої можна створювати в CSS просунутий функціонал, який ще не підтримується. CSSNext активує підтримку таких CSS4 функцій, як gray (), яка на даний момент представлена ​​тільки в W3C чернетках.

На мій погляд, ця бібліотека не для всіх. Це унікальна бібліотека, вирішальна нестандартні завдання. Але в ній ви можете погратися з новими властивостями CSS4, які поки що конвертуються в відповідний синтаксис на CSS3.

Якщо ваша головна проблема - це підтримка в браузері, вам потрібен Stylecow. Це потужна бібліотека, що дозволяє писати CSS код чисто під ваш улюблений браузер. Потім ви можете відкрити командний рядок через Node, і ваш CSS код оновиться під всі необхідні браузери.

Завантажити Stylecow можна з GitHub. в комплекті з ним ви отримаєте детальну документацію.

-prefix-free

І наостанок хочу поділитися бібліотекою -prefix-free. ще одна улюблена бібліотека для CSS розробки. З її допомогою можна писати властивості без префіксів. Всі хочуть використовувати сучасні CSS властивості типу анімації і градієнтів, але ніхто не хоче копіпаст код вручну.

З цим плагіном вам навіть не знадобиться проганяти CSS код через постпроцесор на комп'ютері. Плагін також може працювати в браузері користувача і автоматично оновлювати CSS файли.

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

висновок

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

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі