Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
- Introduction
- Why it’s so popular
- Install the PostCSS CLI
- Most popular PostCSS plugins
- How is it different than Sass?
Introduction
PostCSS is a tool that allows developers to write CSS pre-processors or post-processors, called plugins. There is a huge number of plugins that provide lots of functionalities, and sometimes the term “PostCSS” means the tool itself, plus the plugins ecosystem.
PostCSS plugins can be run via the command line, but they are generally invoked by task runners at build time.
The plugin-based architecture provides a common ground for all the CSS-related operations you need.
Note: PostCSS despite the name is not a CSS post-processor, but it can be used to build them, as well as other things
Why it’s so popular
PostCSS provides several features that will deeply improve your CSS, and it integrates really well with any build tool of your choice.
Install the PostCSS CLI
Using Yarn:
yarn global add postcss-cli
or npm:
npm install -g postcss-cli
Once this is done, the postcss
command will be available in your command line.
This command for example runs the autoprefixer plugin on CSS files contained in the css/ folder, and save the result in the main.css file:
postcss --use autoprefixer -o main.css css/*.css
More info on the PostCSS CLI here: https://github.com/postcss/postcss-cli.
Most popular PostCSS plugins
PostCSS provides a common interface to several great tools for your CSS processing.
Here are some of the most popular plugins, to get an overview of what’s possible to do with PostCSS.
Autoprefixer
Autoprefixer parses your CSS and determines if some rules need a vendor prefix.
It does so according to the Can I Use data, so you don’t have to worry if a feature needs a prefix, or if prefixes you use are now unneeded because obsolete.
You get to write cleaner CSS.
Example:
a {
display: flex;
}
gets compiled to
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
cssnext
https://github.com/MoOx/postcss-cssnext
This plugin is the Babel of CSS, allows you to use modern CSS features while it takes care of transpiling them to a CSS more digestible to older browsers:
- it adds prefixes using Autoprefixer (so if you use this, no need to use Autoprefixer directly)
- it allows you to use CSS Variables
- it allows you to use nesting, like in Sass
and a lot more!
CSS Modules
PostCSS Modules let you use CSS Modules.
CSS Modules are not part of the CSS standard, but they are a build step process to have scoped selectors.
csslint
Linting helps you write correct CSS and avoid errors or pitfalls. The stylint plugin allows you to lint CSS at build time.
cssnano
cssnano minifies your CSS and makes code optimizations to have the least amount of code delivered in production.
Other useful plugins
On the PostCSS GitHub repo there is a full list of the available plugins.
Some of the ones I like include:
- LostGrid is a PostCSS grid system
- postcss-sassy provides Sass-like mixins
- postcss-nested provides the ability to use Sass nested rules
- postcss-nested-ancestors, reference any ancestor selector in nested CSS
- postcss-simple-vars, use Sass-like variables
- PreCSS provides you many features of Sass, and this is what is most close to a complete Sass replacement
How is it different than Sass?
Or any other CSS preprocessor?
The main benefit PostCSS provides over CSS preprocessors like Sass or Less is the ability to choose your own path, and cherry-pick the features you need, adding new capabilities at the same time. Sass or Less are “fixed”, you get lots of features which you might or might not use, and you cannot extend them.
The fact that you “choose your own adventure” means that you can still use any other tool you like alongside PostCSS. You can still use Sass if this is what you want, and use PostCSS to perform other things that Sass can’t do, like autoprefixing or linting.
You can write your own PostCSS plugin to do anything you want.
Download my free CSS Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox