styling – PrimeZeroCafe

PostCSS is getting a lot of attention lately and I decided to give it a try. Post-processing may seem counter intuitive especially if you are used to tools like SASS and LESS, but will make more sense the more time you spend tinkering.

With a post-processor you can define global styles that can then be transformed into specific rules for different components of the web application. This is really quite powerful and allows for creating of a simple set of styles that can then be targeted at specific components. One use would be to have a branding stylesheet that can be applied to different plugins or products.

The concept is somewhat similar to what you can do using pre-processors (eg. Bootstrap and variables) but way more flexible and arguably much cleaner as well. As the base stylesheet could remain unchanged and processing code is added with each additional integration.

Of course, that is only one way to utilize the functionality but the possibilities are countless.
There is a lot of potential here and for workflows that are clean and reusable so make sure to give PostCSS a try. Here are some steps to get up and running quickly:

Install node.js (if you haven’t already)
Create a folder for the test project.
Access command line and go into the folder.
Run the following commands to install the CLI version of the PostCSS package as well as the Autoprefixer plugin. (There are several other PostCSS plugins available and you also have the ability to create your own – the main strength of PostCSS).

The CLI version is a wrapper around the regular PostCSS package and allows you to run PostCSS without any additional build packages. Good for getting to know how it works.

npm install postcss-cli
npm install autoprefixer

The commands will install the packages under node_modules directory created in your current directory.

Create a test file called test.css with the following content.

.transparent {
  opacity: 0;
  transition: opacity 1s;
}

Create an options file called test.json with PostCSS and Autoprefixer options. This allows you to configure parameters for the autoprefixer plugin. In this case a query for supported browsers (see: https://github.com/ai/browserslist#queries)

{
  "use": ["autoprefixer"],
  "autoprefixer": {
    "browsers": "> 5%"
  }
}

Execute the following command to compile the css. result.css will contain the output.

postcss -c test.json -o result.css test.css

You should see that the autoprefixer plugin added browser specific prefixes.

Tag: styling

First steps with PostCSS