Front-end developers actively use CSS pre- and post-processors these days. They allow writing readable and clean code. The most popular pre-processors are Sass, Less, and Stylus, while PostCSS is the first post-processor that comes to mind.

In this article, we would like to focus on the particular features of these tools. You will know their main advantages for web applications development. The main idea is to show you how CSS processors can help programmers reduce the amount of written code for their projects, increase productivity, and build complex web applications.

So let’s see what CSS can offer us today.

Sass: CSS with superpowers

You have probably heard the term Sass floating around, but what exactly does it mean? Let’s see what the official website of this CSS extension tells us.

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Today we would like to focus on the most interesting and rarely used tools called loops and map functions. These are the very instruments that help us get the most out of CSS.

The SCSS is known as an extension of CSS syntax. At Codica, we often use it while building web applications as it is closer to native CSS and doesn’t require additional operations when copying your code from a browser.

Below you can see a code snippet that shows us how Web Fonts are usually declared in CSS. This is a perfect example of code repetition in style sheets.

@font-face {
 font-family: 'OpenSans-Light';
 src: url('opensans-light.eot');
 src: url('opensans-light.eot?#iefix') format('embedded-opentype'),
      url('opensans-light.woff2') format('woff2'),
      url('opensans-light.woff') format('woff'),
      url('opensans-light.ttf') format('truetype'),
	url('opensans-light.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Regular';
 src: url('opensans-regular.eot');
 src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
      url('opensans-regular.woff2') format('woff2'),
      url('opensans-regular.woff') format('woff'),
      url('opensans-regular.ttf') format('truetype'),
	url('opensans-regular.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Bold';
 src: url('opensans-bold.eot');
 src: url('opensans-bold.eot?#iefix') format('embedded-opentype'),
      url('opensans-bold.woff2') format('woff2'),
      url('opensans-bold.woff') format('woff'),
      url('opensans-bold.ttf') format('truetype'),
	url('opensans-bold.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

At the sight of the code snippet above, we get the impression of dealing with duplicate code.

Cat matrix deja vu

This situation calls to mind a scene from the Matrix movie when Neo spots a black cat walking by which was followed by another black cat behaving exactly the same way. That was a visual illustration of déjà vu during the Hotel Ambush.

When we face code duplication, such Sass components as map functions and mixins can save the day.

Below you can see an example of how these tools can help web app developers simplify their code.

For starters, let’s describe our fonts in map fonts.

/* Fonts map format
 $fonts: (
   $file-name: '$font-name'
 )
*/

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-bold: 'OpenSans-Bold',
);

Now we declare variables font using the map-get function:

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_bold: map-get($fonts, opensans-bold);

The feature @mixin allows us to avoid code duplication:

@mixin font-face($font-name, $file-name) {
 /* '/assets/fonts/' - relative path to the fonts folder */
 $filepath: '../assets/fonts/' + $file-name;

 @font-face {
   font-family: #{$font-name};
   src: url($filepath+'.eot');
   src: url($filepath+'.eot?#iefix') format('embedded-opentype'),
        url($filepath+'.woff2') format('woff2'),
        url($filepath+'.woff') format('woff'),
        url($filepath+'.ttf') format('truetype'),
	  url($filepath+'.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }
}

We declare font-face for each font with the help of iterator @each and previously mentioned @mixin:

/* Font face declaring */
@each $file-name, $font-name in $fonts {
 @include font-face($font-name, $file-name);
}

Now in order to add/delete a new font, we need to upload/delete font files in the folder which lies in the path declared in variable $filepath ('../assets/fonts/' in the example). It is worth noting that we should follow file naming, declared in map $fonts and declare/delete variable:

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-semibold: 'OpenSans-Semibold',
 opensans-bold: 'OpenSans-Bold',
);

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_semibold: map-get($fonts, opensans-semibold);
$ff_bold: map-get($fonts, opensans-bold);

All features and tools mentioned above make CSS the integral part of your project stylization.

In their turn, its preprocessors including Sass enable web app developers to write clean and efficient code which is easy to maintain. For many complex web projects, it is the most important requirement.

PostCSS: A tool for transforming CSS with JavaScript

Not only pre-processors can help a web app developer style web projects but also post-processors. They have long been a crucial aspect of CSS workflow. For instance, PostCSS is noted for its ability to auto-optimize the CSS to comply with the existing browser standards. Besides, these highly versatile tools allow transforming CSS styles with JavaScript plugins.

You may also like: 4 Main JavaScript Development Trends in 2019

The usage of PostCSS plugin called Preset Env and CSS Modules is a matter of taste. The plugin lets a web application developer transform modern CSS so that it could be easily understood by most browsers. At the same time, CSS Modules help resolve the issue of the so-called global scope in CSS.

In their turn, code linting and adding vendor prefixes to support cross-browser compatibility are essential for building web applications of any complexity.

Why use Post-processors in web applications development?

Benefits

The cool thing about post-processors is that they streamline the web app development process, increase code readability, and help solve issues front-end developers face, including cross-browser compatibility. If we want to add support for some properties, we can use @mixin to add prefixes to them. For example, here we add mixins to the transition property which allows us to declare reusable styles thus avoiding code duplication:

@mixin transition($args...) {
 -webkit-transition: $args;
 -moz-transition: $args;
 -ms-transition: $args;
 -o-transition: $args;
 transition: $args;
}

Drawbacks

However, this approach has a downside too. It adds prefixes to all browsers even if your end-users get along without them.

That’s when PostCSS with plugin Autoprefixer saves the day. This plugin helps automatically add prefixes to all browsers in CSS, allowing to avoid code duplication and reduce the number of manual tasks, as a result saving web application developers a lot of time.

Let’s talk about Autoprefixer and other plugins in more detail.

PostCSS plugins and tools

Autoprefixer

GitHub offers the following description of Autoprefixer:

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

They also mention that “Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5%”.

This approach fixes the cross-browser compatibility issue, however partially. We use global statistics that can differ in various regions of the world.

Let’s see what Autoprefixer developers mention in this regard on GitHub:

If you want to change the default set of browsers we recommend to combine last 1 version, not dead with > 0.2% (or > 1% in the US, > 1% in my stats). last n versions adds too many dead browsers and does not add popular old versions. Choosing a percentage above 0.2% will, in the long run, make popular browsers even more popular. We might run into a monopoly and stagnation situation, as we had with Internet Explorer 6. Please use this setting with caution.
Opera Mini has 100 million users in Africa and it is more popular in the global market than Microsoft Edge. Chinese QQ Browsers has more market share than Firefox and desktop Safari combined.

Browserslist

Theoretically, we should always cater to an end-user and Browserslist gives us such an opportunity thanks to Browserslist-ga. This package collects statistics from Google Analytics in the JSON file which is used in Browserslist.

On the Browserlist-ga page, we can see the following guide to using this tool:

“In the root directory of your project run: npx browserslist-ga

(npx comes with npm 5.2+, for older versions run npm install -g browserslist-ga and then browserslist-ga)

(to run the latest code directly from GitHub, execute npx github:browserslist/browserslist-ga instead)

You will be asked to log in with your Google Account. Your access token will only be used locally to generate a browserslist-stats.json file in the root of your project. After finishing the steps, you can use your stats with Browserlist by adding the following to your Browserslist config:

> 0.5% in my stats # Or a different percentage

Note that you can query against your custom usage data while also querying against global or regional data. For example, the query > 1% in my stats, > 5% in the US, 10% is permitted”.

As a result, we get “clean” CSS with browser support, based on the statistics of visits to our site.

As it is stated on Browserlist-ga page:

All the praise goes to the humans and martians that develop and maintain Can I Use and Browserslist.

CSSNext

CSSNext is another PostCSS plugin that is worth looking at. It allows using the latest CSS syntax, for example, new custom properties without worrying about browser support.

Stylelint

The last but not least plugin that we will discuss in this article is Stylelint. It is a CSS linter for proofreading and validating the CSS code. It helps you avoid errors and follow consistent coding conventions.

Final thoughts

CSS pre- and post-processors are very popular technologies. Their promise of clean code, simplified web application development workflow and, as a result, increased productivity is very tempting.

By preparing this guide we set a goal to show you how CSS Processors help us develop custom software products of any complexity for our clients. We hope that examples from our practice demonstrate all the power of the tools at your hand.

Check our other articles to get more tips on adopting the latest web app development techniques.

The Power of CSS Processors in Web Applications Development