How to Use PostCSS to Clean Up Your Web Design
Let’s say that you learn about a really cool CSS feature, such as nesting. But when you go ahead and try it, you realize that the support is terrible, and it’s going to be years before you’re able to finally use it. This used to be a huge problem in CSS until the introduction of preprocessors like PostCSS.
Learn how PostCSS allows you to use modern and future CSS today during development. You’ll find out exactly what PostCSS is, how you can use it, and the best way to take advantage of its features.
Setting Up the Project
Navigate into an empty folder, create a file named index.html, and add the following HTML markup in the file:
This HTML document renders a paragraph andelement. It also imports a style sheet file namedstyles.cssthat is inside thesrcfolder. Create the file in thesrcfolder and include the following CSS style rules:
This CSS styles the color of both elements on the page and creates a grid layout. Most browsers support normal CSS syntax like this. But when you have your sight on newer syntax, you’ll need to bring in PostCSS.
Creating a Node.js Project and Installing PostCSS
In simple terms, PostCSS allows you to convert modern CSS into something that most browsers can understand; a process commonly known as transpiling. This is perfect if you want to try out new, experimental, or nonstandard CSS properties in your code that major browsers may not support.
PostCSS also offers a rich ecosystem of JavaScript plugins that you can install to enable certain features, such as CSS minification, color support, and linting support.
To use PostCSS, the first thing you need to do is initialize a new Node.js project:
This command will generate a package.json file that contains the default values for your app.
Next, install both PostCSS and the PostCSS CLI. The second package allows you to run PostCSS from the command line:
The–save-devflag installs bothnpm packagesas dev dependencies; you’re only going to use PostCSS and its plugins to process the CSS code during development.
To start using PostCSS via thecommand line interface, go into yourpackage.jsonfile and create the simplebuild:csscommand for transpiling with PostCSS:
This command will take your bare CSS (stored insrc/styles.css), tranpile the code, and then output it in thedestfolder. Running thenpm build:csscommand creates this folder and populates it with thestyles.cssfile containing browser-readable code.
When you’re importing your CSS into the HTML, ensure that you import from the destination folder where you’re compiling your CSS, and not the source folder that PostCSS compiles from. This, in our case, is thedistfolder, not thesrcfolder.
If you open your website in a browser, you’ll see that the site still accesses the CSS. Anytime you make changes to the source file, PostCSS will recompile the code and the changes will reflect on the web page.
Using PostCSS Plugins
There are hundreds ofPostCSS pluginsfor adding prefixes, linting, new syntax support, and dozens of other features to PostCSS. After installing a PostCSS plugin, you activate it inside thepostcss.config.jsfile — a JavaScript file that you can use to set up all the configurations for PostCSS.
Install thecssnanoPostCSS plugin with the following command:
Once again, you only need to save these dependencies as dev dependencies. The reason is that all of these happen as you’re developing. You do not need PostCSS or any of its plugins after pushing the site to production.
To use the newly installed cssnano plugin, you’re to add the following code inside thepostcss.config.jsfile:
Now if you go back to the terminal and rerun the build command, this will minify the output CSS (i.e. make the code as small as humanly possible). So when you push to a production-ready site, it’s going to make your CSS as small as possible.
Using Modern Features Like Nesting
Suppose you want to use the nesting syntax in your stylesheet, so you replace the paragraph block insrc/styles.csswith this:
This code is the same as the version in your starter code. But this will throw an error because the syntax is very new, and most web browsers don’t support it. You can enable support for this syntax with PostCSS by installing thepostcss-preset-envplugin.
The plugin compiles together a bunch of different plugins for handling CSS based on what stage it is. Stage 0 represents the super experimental features that may not even make it into CSS. Whereas, stage 4 is for language features that are already part of the CSS specification.
By default,present-envuses stage 2 features (that are most likely to make it into CSS). But you’re able to change the stage to whatever you want in the configuration file.
To install the plugin, run the following command:
Then in yourpostcss.config.jsfile, you’re to import the plugin and register it:
You should only pass the stage of the new CSS code you intend to use. In this case, we’re assuming the nesting feature is at stage 1. When you rerun the build command and check the browser, you’ll see that it’s compiled the nested code into standard CSS that the browser can understand.
Using PostCSS With Frameworks
Configuring PostCSS manually can be a bit of a pain. This is why almost all modern frameworks come with bundling tools (e.g., Vite, Snowpack, and Parcel), and these tools will have support for PostCSS built-in. And even if they don’t, the process of adding PostCSS support is incredibly easy.
Always remember that Vite and most other bundlers useES6 Module System, not CommonJS. To get around this, you need to use theimportstatement in place ofrequire()in yourpostcssconfig.jsfile:
As long as you have the plugins installed, everything will work just fine.
Learn More About SaSS
PostCSS is just one of dozens of CSS preprocessors currently available. One of them is SaSS, which stands for syntactically awesome style sheets.
Learning to use another major preprocessor can come in handy as a CSS developer.
If you’re struggling with unwieldy, messy CSS files, look no further than Sass and its processing magic.
Anyone with more than a passing interest in motorsports must see these films.
You’re not getting the most out of what you pay for iCloud+.
You can’t call this offline, Notion.
Your phone’s camera app doesn’t show this, so it’s easy to miss.
The key is not to spook your friends with over-the-top shenanigans.
