PostCSS Deep Dive: Shortcuts and Shorthand

So far we’ve used PostCSS to do things like optimizing stylesheets, adding functionality for preprocessing, and generating certain class naming conventions, but how can it help just writing plain old CSS?

There are so many little bits of code the average web designer types out thousands of times through the course of their career, and if you can gain just a little bit of time back on each one it adds up to a lot in the end.

In this tutorial we’re going to use PostCSS to cut down on every day code typing time via a series of shortcuts and shorthand additions. Let’s begin!

Setup Your Project

You’ll be familiar with this process by now, but the first thing you’ll need to do is setup your project to use either Gulp or Grunt. If you don’t already have a preference for one or the other I recommend using Gulp as you’ll need less code to achieve the same ends, so you should find it a bit simpler to work with.

You can read about how to setup Gulp or Grunt projects for PostCSS in the previous tutorials

• 
  PostCSS Quickstart Guide: Gulp Setup or


• PostCSS Quickstart Guide: Grunt Setup

respectively.

If you don't want to manually setup your project from scratch though, you can download the source files attached to this tutorial, and extract either the provided Gulp or Grunt starter project into an empty project folder. Then with a terminal or command prompt pointed at the folder run the command npm install.

Install Plugins

For this tutorial we’ll be installing several plugins, each one handling a different type of shortcut or shorthand.

Whether you’re using Gulp or Grunt, run the following command inside your project folder to install the plugins we’ll be using:

npm install postcss-alias postcss-crip postcss-font-magician postcss-triangle postcss-circle postcss-all-link-colors postcss-center postcss-clearfix postcss-position postcss-size postcss-verthorz postcss-color-short --save-dev

Now we’re ready to load the plugins into your project.

Load Plugins via Gulp

If you’re using Gulp, add these variables under the variables already in the file:

var alias = require('postcss-alias');
var crip = require('postcss-crip');
var magician = require('postcss-font-magician');
var triangle = require('postcss-triangle');
var circle = require('postcss-circle');
var linkColors = require('postcss-all-link-colors');
var center = require('postcss-center');
var clearfix = require('postcss-clearfix');
var position = require('postcss-position');
var size = require('postcss-size');
var verthorz = require('postcss-verthorz');
var colorShort = require('postcss-color-short');

Now add each of those new variable names into your processors array:

  var processors = [
    alias,
crip,
magician,
triangle,
circle,
linkColors,
center,
clearfix,
position,
size,
verthorz,
colorShort
  ];

Do a quick test that everything is working by running the command gulp css then checking that a new “style.css” file has appeared in your project’s “dest” folder.

Load Plugins via Grunt

If you’re using Grunt, update the processors object, which is nested under the options object, to the following:

        processors: [
          require('postcss-alias')(),
          require('postcss-crip')(),
          require('postcss-font-magician')(),
          require('postcss-triangle')(),
          require('postcss-circle')(),
          require('postcss-all-link-colors')(),
          require('postcss-center')(),
          require('postcss-clearfix')(),
          require('postcss-position')(),
          require('postcss-size')(),
          require('postcss-verthorz')(),
          require('postcss-color-short')()
        ]

Do a quick test that everything is working by running the command grunt postcss then checking that a new “style.css” file has appeared in your project’s “dest” folder.

Alright, now your plugins are all installed let’s learn how to use them for CSS shortcuts and shorthand.

Use Shorthand for Properties

There are a lot of properties we have to type over and over and over again in CSS. Sure, the time it takes to type a handful of characters once is very small, but over years of development it all adds up. We’re going to look here at two plugins that allow you to trim those properties down to shorthand versions to you can get a quick and smooth flow going as you hammer out your CSS.

Define Your Own Shorthand

The postcss-alias plugin by Sean King allows you to define your own shorthand, or “aliases”, for any properties you want to abbreviate. This gives you a way to make sure the shorthand you use fits with the way your mind works and is hence easy for you to remember.

To define some aliases add an at-rule at the top of your stylesheet with the syntax @alias {...}. Then inside the at-rule setup your aliases by adding alias-name: property-name;.

Add the following example to your “src/style.css” file, which will setup aliases for the border-size, border-style and border-color properties:

@alias {
    bsz: border-size;
bst: border-style;
bcl: border-color;
}

Then add this code to test out using the new aliases:

.set_border {
    bsz: 1px;
bst: solid;
bcl: #ccc;
}

Compile your file, and in your “dest/style.css” file you should now see:

.set_border {
    border-size: 1px;
border-style: solid;
border-color: #ccc;
}

Read more about postcss-alias at: https://github.com/seaneking/postcss-alias

Plug ‘n’ Play Shorthand

If you want to use a lot of property shorthands, but you don’t want to go through the steps of defining each one yourself, you can check out the plugin postcss-crip by Johnie Hjelm which has hundreds of property abbreviations ready for plugin and play use.

For example, add the following code to your “src/style.css” file, which contains shorthand for the margin-top, margin-right, margin-bottom and margin-left properties:

.crip_shorthand {
    mt: 1rem;
mr: 2rem;
mb: 3rem;
ml: 4rem;
}

Compile your code and you should see the expanded properties appear in your “dest/style.css” file:

.crip_shorthand {
    margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 3rem;
margin-left: 4rem;
}

Read more about postcss-crip at: https://github.com/johnie/postcss-crip

And see the full list of property abbreviations at: https://github.com/johnie/crip-css-properties

Output @font-face in One Line

The postcss-font-magician plugin by Jonathan Neal very much lives up to its name. It allows you to use custom fonts via a simple font-family rule as though you were using a standard font, and the font will just magically work.

Add the following code to your “src/style.css” file:

body {
  font-family: "Indie Flower";
}

That’s it. That’s all it takes to make use of postcss-font-magician. No special syntax, just use the font name as you would any other.

In this case, the Indie Flower font is one that I’ve selected from the Google Fonts library. I haven’t added any custom font files to my project, so the plugin will see that and instead go check to see if my specified font is available from Google Fonts. When it finds that it is available, it will create the appropriate @font-face code completely automatically.

Compile your file then look at your “dest/style.css” file, where you’ll see this code has been added in:

@font-face {
    font-family: "Indie Flower";
font-style: normal;
font-weight: 400;
src: local("Indie Flower"),local(IndieFlower),
url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"),
url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"),
url(//fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

You can check that the font is loading correctly by creating a new file in your “dest” folder named “index.html” and adding this code to it:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Test Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo at semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.</p>

</body>
</html>

For the fonts to load you’ll need to view this file via an https:// address, rather than a file:// address, so either upload the file to a web host or use an app like Prepros to create a live preview.

You should see the Indie Flower font applied to all your text, like so:

Read more about postcss-font-magician here: https://github.com/jonathantneal/postcss-font-magician

Create CSS Shapes

If you’ve ever used pure CSS to create shapes, you’ll know it can be a great way to include things like circles and triangles into your designs, but that it can also be quite tricky. Particularly in the case of triangles, figuring out what code you need to get a shape oriented in the right direction at the right size can feel somewhat counter intuitive.

That’s where the postcss-circle and postcss-triangle plugins by Jed Mao come to the rescue. Both plugins create a simplified syntax, and an intuitive way of creating circles and triangles with pure CSS.

Add a Circle

To create a circle, use the syntax circle: size color;. Add the following code to your “src/style.css” file:

.circle {
    circle: 8rem #c00;
}

Compile it and you’ll see the following code added to your “dest/style.css” file:

.circle {
    border-radius: 50%;
width: 8rem;
height: 8rem;
background-color: #c00;
}

Now add this HTML to the “dest/index.html” file you created in the last section:

<div class="circle"></div>

Take a fresh look at your file in a browser and you should now see a red circle:

Read more about postcss-circle at: https://github.com/jedmao/postcss-circle

Add a Triangle

There are three types of triangle you can add using this plugin; isosceles, right-isosceles and equilateral. Each have slightly different sets of syntax, which you can read about in full at the plugin’s Github repo.

We’ll go through adding an isosceles triangle, the syntax for which is:

triangle: pointing-<up|down|left|right>;
width: <length>;
height: <length>;
background-color: <color>;

Let’s add this example isosceles triangle to our “src/style.css” file:

.isosceles-triangle {
    triangle: pointing-right;
width: 7rem;
height: 8rem;
background-color: #c00;
}

Compile the file and you should now see complete triangle CSS in your “dest/style.css” file:

.isosceles-triangle {
    width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 4rem 0 4rem 7rem;
border-left-color: #c00;
}

To see the triangle in your “dest/index.html” file add this html:

<div class="isosceles-triangle"></div>

On refreshing this file in your browser, you should now see a red isosceles triangle pointing to the right:

Read more about postcss-triangle at: https://github.com/jedmao/postcss-triangle

Use Shortcuts for Common Tasks

Set Link Styling

Setting colors for links is a job that has to be done in every project, and requires setting styles for default links as well as four different link states. The postcss-all-link-colors plugin by Jed Mao lets you shortcut that process, outputting the colors for all your links at once.

Add the following to your “src/style.css”:

a {
    @link-colors all #4D9ACC;
}

Then compile your file and you’ll see all the required link states have been set:

a {
    color: #4D9ACC;
}

a:visited {
color: #4D9ACC;
}

a:focus {
color: #4D9ACC;
}

a:hover {
color: #4D9ACC;
}

a:active {
color: #4D9ACC;
}

You also have the option to generate a different color for a specific state. Just add some curly braces at the end of the rule, and inside that use the syntax state: color;.

Update the code you just added to your “src/style.css” file to the following:

a {
    @link-colors all #4D9ACC {
hover: #5BB8F4;
}
}

Now when you compile you’ll see the hover state has a different color to the rest of the styles:

a {
    color: #4D9ACC
}

a:visited {
color: #4D9ACC;
}

a:focus {
color: #4D9ACC;
}

a:hover {
color: #5BB8F4;
}

a:active {
color: #4D9ACC;
}

Read more about postcss-all-link-colors at: https://github.com/jedmao/postcss-all-link-colors

Center Vertically or Horizontally

Centering, either vertically or horizontally, is one of those tasks that’s a perpetual thorn in the side of CSS developers. Jed Mao’s postcss-center plugin makes the task a lot simpler with the introduction of top: center; for vertical centering, and left: center; for horizontal centering.

Add this code to your “src/style.css” file:

.centered {
  top: center;
  left: center;
}

Then compile it and you’ll see the following code:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

Note: the centering uses absolute positioning, so you will need to wrap your centered elements with a parent that uses relative, absolute or fixed positioning. Given absolutely positioned elements don’t affect the height or width of their parents, you’ll also want to set the height and width of the parent element to suit.

For example, add left: center; to the .circle class you created earlier so it will be horizontally centered:

.circle {
    circle: 8rem #c00;
left: center;
}

Then add this second class to act as a wrapper around the circle, giving it relative positioning and a height matching the circle:

.circle_wrap {
    position: relative;
height: 8rem;
}

Now add an element bearing this class as a wrapper around your existing circle html:

<div class="circle_wrap">
    <div class="circle"></div>
</div>

When you go back and refresh your page, you should see your circle has been horizontally centered:

Read more about postcss-center at: https://github.com/jedmao/postcss-center

Output Clearfix in One Line

In any design that incorporates floats, creating a clearfix class is so handy that it’s just about essential. Sean King’s postcss-clearfix plugin turns creating that clearfix styling into a one line job, by adding fix as a possible value that can be used with the clear property.

For a clearfix that will work on IE8+ add the following to your “src/style.css” file:

.clearfixed {
  clear: fix;
}

On compiling, you’ll see it has produced the following clearfix code, ready for use:

.clearfixed:after {
    content: '';
display: table;
clear: both;
}

If you need a clearfix that will work on IE6+ use the value fix-legacy instead of plain fix, like so:

.clearfixed_legacy {
  clear: fix-legacy;
}

When this code is compiled, you’ll see it includes a little extra content that makes it friendly to legacy browsers:

.clearfixed_legacy:before,
.clearfixed_legacy:after {
    content: '';
display: table;
}

.clearfixed_legacy:after {
clear: both;
}

.clearfixed_legacy {
  zoom: 1;
}

Read more about postcss-clearfix at: https://github.com/seaneking/postcss-clearfix

Set Positioning in One Line

When you want to use non default positioning, i.e. absolute, fixed or relative, you have to type out the values for the element’s top, right, bottom and left positioning manually. There is no shorthand as you might use when setting margins or padding in one line. That is, until you install Sean King’s postcss-position plugin.

With this plugin, when using the position property, after setting a value of absolute / fixed / relative, you can declare top, right, bottom and left values in the same line.

Add the following example code to your “src/style.css” file:

.absolute {
    position: absolute 1rem 1rem 0 0;
}

After compilation, you’ll see the shorthand has compiled into the separate lines you would normally have to type out manually.

.absolute {
    position: absolute;
top: 1rem;
right: 1rem;
bottom: 0;
left: 0;
}

The way these values are declared is with the same pattern as in margin or padding shorthand, i.e. you can also set top and bottom in the first value, then right and left in the second, or you can set one value to apply to all four.

For example, try out the following code:

.fixed_two_values {
    position: fixed 2rem 1rem;
}

.relative_one_value {
position: relative 3rem;
}

You should see it compile into:

.fixed_two_values {
    position: fixed;
top: 2rem;
right: 1rem;
bottom: 2rem;
left: 1rem;
}

.relative_one_value {
position: relative;
top: 3rem;
right: 3rem;
bottom: 3rem;
left: 3rem;
}

Read more about postcss-position at: https://github.com/seaneking/postcss-position

Set Width and Height at Once

The postcss-size plugin by Andrey Sitnik allows you to crunch the often used width and height properties down into a single size property. You can use it in two ways: passing two values with the first evaluating to width and the second to height, or passing one value that will be used for both width and height.

Test this out by adding the following CSS to your “src/style.css” file:

.size_a {
    size: 1rem 2rem;
}

.size_b {
    size: 1rem;
}

On compilation, you should see this code now in your “dest/style.css” file:

.size_a {
    width: 1rem;
height: 2rem;
}

.size_b {
    width: 1rem;
    height: 1rem;
}

Read more about postcss-size at: https://github.com/postcss/postcss-size

Set Vertical and Horizontal Spacing

As a big lover of efficient coding, when writing out margins and padding, which are often equal on two sides, I’ve frequently found myself wishing there was a shortcut to declare vertical and horizontal spacing at once. I even wrote a few preprocessor mixins to do just that. But I won’t need those mixins anymore thanks to the postcss-verthorz plugin by David Hemphill.

With this plugin you can use padding-vert or margin-vert to set vertical spacing, and padding-horz or margin-horz to set horizontal spacing. Add the following example code to your “src/style.css” file to see this working:

.spacing {
    padding-vert: 1rem;
margin-horz: 2rem;
}

After compilation you’ll see these rules have been expanded into full padding and margin declarations.

.spacing {
    padding-top: 1rem;
padding-bottom: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}

You can also shortcut these properties even further by abbreviating them to two letters. The example code we used above could be abbreviated to the following and the output would be exactly the same:

.spacing_short {
    pv: 1rem;
mh: 2rem;
}

Read more about postcss-verthorz at: https://github.com/davidhemphill/postcss-verthorz

Output Color Codes

My favorite default text color is #232323 and I don’t know if it’s just me, but I get tired of hammering out those same two digits over and over again. I often wished there was a shortcut, similar to the way you can trim #ffffff down to #fff. With the postcss-color-short plugin by Andrey Polischuk, there is.

When using this plugin, if you set a two digit color code those digits will be repeated until a six digit code is created, e.g. #23 will become #232323. If you set a one digit color code, it to will be repeated until there are three digits, e.g. #f will become #fff. You can even use it to set rgba() colors, where the first digit you pass will be repeated three times, and the second used as the alpha value, e.g. rgba(0, 0.5) will become rgba(0, 0, 0, 0.5).

Add the following to your “src/style.css” file to try all the above out:

.short_colors {
    color: #23;
background: #f;
border-color: rgba(0, 0.5);
}

After compilation you’ll see all the colors have been output in their full form:

.short_colors {
    color: #232323;
background: #fff;
border-color: rgba(0, 0, 0, 0.5);
}

Read more about postcss-color-short at: https://github.com/andrepolischuk/postcss-color-short

Summing Up

Let’s quickly recap everything we’ve been over in this tutorial:

• Small every day coding tasks don’t seem like much individually, but they add up to a huge amount of time overall, so shortcutting them can be worthwhile


• The postcss-alias plugin lets you create your own shorthand for properties
  
  


• The postcss-crip plugin has hundreds of predefined property shorthands


• The postcss-font-magician lets you use custom fonts as though they were default fonts, auto generating @font-face code for you


• The postcss-circle and postcss-triangle plugins make creating CSS circles and triangles straight forward and intuitive


• The postcss-all-link-colors plugin lets you output colors for all your link states at once
  
  


• The postcss-center plugin provides vertical and horizontal centering with top: center; and left: center;
  


• The postcss-clearfix plugin lets you output clearfix code with clear: fix;
  


• The postcss-position plugin allows you to add your top, right, bottom and left settings as part of your use of the position property


• The postcss-size plugin lets you set width and height at once
  
  


• The postcss-verthorz plugin allows horizontal spacing and vertical spacing to be output with single rules.


• The postcss-color-short plugin gives you the ability to use one and two digit hexcodes, and other color shortcuts.

In the Next Tutorial

In the next tutorial we’ll move onto plugins that are great, but just don’t fall into any particular category. I’ll see you soon in “Miscellaneous Goodies”.