Consistency is key when creating a CSS framework for any website or app. No matter how large or small, it’s important to use consistent colors, margins, and hover treatments, just to name a few. Old news, right?

While working on a single site or app, consistency can be a fairly simple thing to manage. But what happens as a company grows? The web presence and team grows along with it. Now we have to manage consistency between the public website, various intranet website, and the product. This can be a challenge as more developers work on the respective web assets. As the team grows the inconsistency can grow as well.

How can we combat this issue? CSS custom properties to the rescue! But wait, CSS custom properties are set up on a per website basis.

JSON to the rescue! Using JSON, we can set up a repository that contains the master properties to be used across all company websites. This repository can contain anything that will eventually become a CSS custom property.

There are various methods to convert the JSON data into usable CSS custom properties. One method I’ve used successfully is using PostCSS and the PostCSS-Import-JSON plugin. The plugin imports the JSON file and converts the data into CSS custom properties.

Let’s look at a basic use-case example. First, we’ll need to add PostCSS and the plugin to your project. For more information about how to add PostCSS, check out their setup guide.

Once PostCSS is installed, you can install the PostCSS-Import-JSON plugin. Instructions can be found here.

After PostCSS and the plugin are set up, it’s time to set up our build task to handle the import of the JSON file. I’m using Gulp for the following example:

Gulp task building CSS file (also includes rename and browsersync tasks).

So let’s use a very basic example and just set up a JSON file for colors. Your JSON file might look something like this:

JSON data file including colors

Now that our JSON file contains our color scheme, we can import those colors into our PostCSS file using:

JSON import in PostCSS

During the build process, the import plugin converts the JSON data to CSS custom properties. The JSON file can be imported into the root or any other element.

CSS output — CSS custom properties

Now we have a set of CSS custom properties that originate from the master JSON control file. If the JSON file colors are updated, those colors will be changed when website styles are rebuilt. Even in this simple example, we can see how this helps drive consistency.

Imagine a world where the public website, intranet, and product all use the same base JSON files to control custom properties. Those properties would be consistent across the board. Naming conventions can be consistent, and developers on the team can onboard faster.

For more information about CSS custom properties, check out this Smashing Magazine post.