Modern CSS Workflow & Tools
Modern CSS development involves tools for compilation, optimization, linting, and formatting. Understanding the CSS toolchain helps you work efficiently in professional development teams.
CSS Development Tools
- PostCSS — CSS transformer: autoprefixer (adds vendor prefixes), cssnano (minification), postcss-preset-env (future CSS today)
- Autoprefixer — Automatically adds -webkit-, -moz- prefixes based on browser target. No manual prefixes needed
- Stylelint — CSS linter: catches errors, enforces conventions, prevents specificity issues
- Prettier — CSS formatter: consistent indentation, spacing, and formatting across your team
- PurgeCSS — Removes unused CSS. Can reduce file size by 90%+ (especially with frameworks)
- Lightning CSS — Ultra-fast CSS parser and minifier. Written in Rust. Replaces PostCSS for many use cases
- Browser DevTools — Chrome/Firefox DevTools for debugging, performance profiling, and responsive testing
Tool Configuration
/* PostCSS configuration (postcss.config.js) */
/*
module.exports = {
plugins: [
'autoprefixer', // Add vendor prefixes
'postcss-preset-env', // Use future CSS today
'cssnano', // Minify for production
]
};
*/
/* Stylelint configuration (.stylelintrc.json) */
/*
{
"extends": "stylelint-config-standard",
"rules": {
"selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
"max-nesting-depth": 3,
"no-duplicate-selectors": true,
"declaration-no-important": true
}
}
*/
/* package.json scripts */
/*
{
"scripts": {
"css:lint": "stylelint 'src/**/*.css'",
"css:format": "prettier --write 'src/**/*.css'",
"css:build": "postcss src/styles/main.css -o dist/styles.css",
"css:purge": "purgecss --css dist/styles.css --content src/**/*.html"
}
}
*/Tip
Add 'css:lint' and 'css:format' to your CI/CD pipeline. Stylelint catches errors before deployment; Prettier ensures consistent formatting. Combined with PurgeCSS for production builds, you get clean, minimal, error-free CSS automatically.
Every element follows the box model — content + padding + border + margin
Common Mistake
Skipping Autoprefixer because 'modern browsers don't need prefixes'. Some properties still need them — backdrop-filter requires -webkit-backdrop-filter in some browsers. Autoprefixer handles this automatically based on your browserslist config.
Practice Task
Set up a CSS build pipeline: (1) Install PostCSS + Autoprefixer + cssnano, (2) Create postcss.config.js with the 3 plugins, (3) Add an npm script: 'css:build' that processes and minifies your CSS, (4) Compare input vs output file sizes.
Quick Quiz
Key Takeaways
- Modern CSS development involves tools for compilation, optimization, linting, and formatting.
- PostCSS — CSS transformer: autoprefixer (adds vendor prefixes), cssnano (minification), postcss-preset-env (future CSS today)
- Autoprefixer — Automatically adds -webkit-, -moz- prefixes based on browser target. No manual prefixes needed
- Stylelint — CSS linter: catches errors, enforces conventions, prevents specificity issues