Suggest an editImprove this articleRefine the answer for “When is PostCSS used together with preprocessors?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**PostCSS** is used together with preprocessors when there is a need to separate development tasks from production tasks. **Key point:** a preprocessor makes writing CSS more convenient, while PostCSS brings the final code to an optimal state for browsers.Shown above the full answer for quick recall.Answer (EN)ImagePostCSS is used together with preprocessors when there is a need to **separate development tasks from production tasks**. A preprocessor makes writing CSS more convenient, while PostCSS brings the final code to an optimal state for browsers. --- ### **When they are combined in practice** **1) For cross-browser support after SASS/LESS** Even if a project is written in SCSS, without PostCSS you would have to track prefixes by hand. So the chain is usually: ```javascript SASS/LESS → CSS → PostCSS (Autoprefixer) → final CSS ``` **2) For minifying and optimizing the final CSS** A preprocessor does not minify or clean up code, but PostCSS plugins (for example, `cssnano`) do this automatically. **3) For using modern CSS features** If new CSS capabilities are used in SCSS, PostCSS with the `postcss-preset-env` plugin converts them into code compatible with current browsers. **4) For removing unnecessary styles in production** Tools like `PurgeCSS` only work after the styles have already been generated. That is not a preprocessor's job. --- ### **Division of roles** | Stage | Tool | What it does | |---|---|---| | development | **SASS/LESS** | variables, nesting, mixins and convenient syntax | | build/production | **PostCSS** | prefixes, minification, cleanup, optimization | --- ### **Summary** PostCSS is used together with preprocessors when there is a need to: - write code conveniently (preprocessor) - and at the same time ship it to production as clean, optimized and cross-browser as possible (PostCSS) In other words, the tools **do not compete**; they complement each other in a single pipeline.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.