CSS Tooling Overview

Originally CSS was handled directly by browser without any processing beforehand, modern CSS tooling has empowered CSS with many features beyond the language itself to fix CSS problems at scale and often baked inside web frameworks.

The evolution of CSS tooling started with CSS preprocessors like Sass and recently blossomed with PostCSS and web bundlers.

There are countless ways to setup CSS tooling properly depending the combination of following factors:

• Build pipeline - web frameworks (Angular, Vue, Next, etc.), module bundlers (Webpack, Parcel, etc.), task runners (Gulp, Grunt, etc.)
• CSS syntax - vanilla CSS, CSS-like syntax, CSS-in-JS.
• CSS transformation - linting, prefixing, future CSS, etc.

Setting up and customizing CSS transformation to your specific use case takes time. It’s recommended to use a web framework that has following popular tools configured perfectly:

• PostCSS - transforms CSS with JavaScript plugins
• CSSTree - detailed CSS parser with syntax validator
• Sass - powerful professional-grade CSS extension language
• Normalize - CSS reset library that normalizes browser defaults
• astroturf - lets you write CSS in your JavaScript files
• postcss-preset-env - allows you to use future CSS features today
• postcss-sorting - keeps rules and at-rules content in order
• autoprefixer - adds vendor prefixes
• stylelint - modular stylesheet linter
• cssnano - modular CSS minifier

PostCSS has been widely adopted in modern web development, flexible enough to integrate with any task runners and module bundlers, has more than 200 plugins, and will have a great impact on how we write CSS in a foreseeable future.