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 can 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.

MAKEUSEOF VIDEO OF THE DAYSCROLL TO CONTINUE WITH CONTENT


Setting Up the Project

Navigate into an empty folder, create a file named index.html, and add the following HTML markup in the file:

 <!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="src/styles.css">
</head>

<body>
  <p>Paragraph</p>
  <div>Div</div>
</body>

</html>

This HTML document renders a paragraph and <div> element. It also imports a style sheet file named styles.css that is inside the src folder. Create the file in the src folder and include the following CSS style rules:

 body p 
  color: orange;

body div
  color: blue;

body
  display: grid;

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:

 npm init -y 

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:

 npm i --save-dev postcss postcss-cli 

The –save-dev flag installs both npm packages as dev dependencies; you’re only going to use PostCSS and its plugins to process the CSS code during development.

To start using PostCSS via the command line interface, go into your package.json file and create the simple build:css command for transpiling with PostCSS:

 "scripts": 
  "build:css": "postcss src/styles.css --dir dest -w"

This command will take your bare CSS (stored in src/styles.css), tranpile the code, and then output it in the dest folder. Running the npm build:css command creates this folder and populates it with the styles.css file 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 the dist folder, not the src folder.

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 of PostCSS plugins for adding prefixes, linting, new syntax support, and dozens of other features to PostCSS. After installing a PostCSS plugin, you activate it inside the postcss.config.js file — a JavaScript file that you can use to set up all the configurations for PostCSS.

Install the cssnano PostCSS plugin with the following command:

 npm i --save-dev cssnano 

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 the postcss.config.js file:

 const cssnano = require("cssnano")

module.exports =
  plugins: [
    cssnano(
      preset: 'defaults'
    )
  ]

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 in src/styles.css with this:

 body 
  & p
    color: orange;
  

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 the postcss-preset-env plugin.

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-env uses stage 2 features (that are most likely to make it into CSS). But you can change the stage to whatever you want in the configuration file.

To install the plugin, run the following command:

 npm i --save-dev postcss-preset-env 

Then in your postcss.config.js file, you’re to import the plugin and register it:

 const cssnano = require("cssnano")
const postcssPresetEnv = require("postcss-preset-env")

module.exports =
  plugins: [
    cssnano(
      preset: 'defaults'
    ),
    postcssPresetEnv( stage: 1)
  ]

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 use ES6 Module System, not CommonJS. To get around this, you need to use the import statement in place of require() in your postcssconfig.js file:

 import cssnano from "cssnano" 

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.