Що таке PostCSS?
PostCSS - це постпроцесор і водночас платформа для плагінів, яка приймає на вхід звичайний CSS і дає змогу за допомогою набору плагінів модифікувати його перед відправленням у продакшен. По суті, це не "ще один препроцесор", а механізм, який розширює і поліпшує готовий CSS за рахунок підключених модулів.
Ключова ідея
PostCSS сам по собі майже нічого не робить - він працює як конструктор. Результат залежить від того, які плагіни до нього підключені. Через це його називають "платформою для обробки CSS", аналогічно до того, як Babel обробляє JavaScript.
Які завдання він вирішує (через плагіни)
- Autoprefixer - додає крос-браузерні префікси
- cssnano - мінімізує CSS
- postcss-preset-env - дає змогу писати майбутній CSS, перетворюючи його під поточні браузери
- PurgeCSS / postcss-purgecss - видаляє невикористані стилі
- postcss-sort-media-queries - об'єднує і сортує медіа-запити
- postcss-import - дає змогу використовувати імпорти і збирати CSS як модулі
Чим PostCSS вигідно відрізняється від SASS/LESS
| Інструмент | Функція |
|---|---|
| SASS/LESS | допомагає писати зручний розширений синтаксис → генерує CSS |
| PostCSS | поліпшує вже готовий CSS → робить його оптимальним для браузерів |
Вони не конкуренти, а часто використовуються в одній збірці: SASS → CSS → PostCSS → продакшен
Чому PostCSS популярний
- гнучкість (підключаєш тільки потрібні плагіни)
- величезна екосистема
- підходить під будь-яку збірку: Webpack, Vite, Gulp, Parcel
- відповідає вимогам продакшена: оптимізація, крос-браузерність, чистота
Коротко: PostCSS - це інструмент для автоматичної обробки CSS на етапі збірки, заснований на плагінах. Він відповідає за те, щоб готові стилі були сумісними, легкими, сучасними і оптимізованими для браузерів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.