Shortening CSS: Teaming Up

By Mark Syred. Difficulty level: Basic

Were you to inspect the CSS for this very website, it might appear to be a bit all over the place. But, it has been written in an effort to cut down on its size. This post explains how.

A CSS rule-set consists of a selector and a declaration block:

h2 /*The selector*/ {
    margin: 10px;
    color: blue; /*The declaration block*/
}

The selector refers to the HTML element that's being targeted, and the declaration block tells the browser how to style the element. The declaration block above has two declarations, where margin and color are the properties, and 10px and blue are the values. Very rarely will a style-sheet contain a single rule-set and often different rule-sets can end up with the same properties having the same values.

This is the third of a brief series of posts on shortening your CSS, something that is becoming increasingly important the more people access the intermet on their phones, often without WI-FI access. Every letter, character, space or line-break you can shave off your CSS, saves one byte of data having to be downloaded. But, as such practice makes it harder for humans to read, in this blog, I'll be preserving the white space.

Taking this into account and handling the issue of there being properties from multiple rule sets with identical values is pretty straightforward.

The Long Way, Part One

h1 {
    margin: 10px 0 12px;
    color: red;
    padding: 25px 0;
    font-size: 30px;
}

h2 {
    margin: 10px 0 12px;
    color: red;
    padding: 25px 0;
    font-size: 24px;
}

In the example above, many of the same properties have identical values. Shortening the CSS can be done as follows:

The Short Way, Part One

h1, h2 /*Comma separated selectors*/ {
    margin: 10px 0 12px;
    color: red;
    padding: 25px 0;
}
/*Properties where the values are identical are combined*/

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}
/*Properties where the values are different are kept separate*/

This works well where there are only a few CSS rule-sets, but as your CSS gets longer, it can be more efficient to break up the declaration blocks.

The Long Way, Part Two

h1 {
    margin: 10px 0 15px;
    font-size: 30px;
    font-family: Arial, sans-serif;
    line-height: 1.3;
    font-weight: bold;
    border-bottom: 1px solid #cccccc;
}

h2 {
    margin: 10px 0 15px;
    font-size: 26px;
    font-family: Arial, sans-serif;
    line-height: 1.3;
    font-weight: bold;
}

h3 {
    margin: 10px 0 12px;
    font-size: 22px;
    font-family: Arial, sans-serif;
    line-height: 1.2;
    font-weight: bold;
}

h4 {
    margin: 10px 0;
    font-size: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.2;
    font-weight: bold;
}

p {
    margin: 10px 0;
    font-size: 16px;
    font-family: 'Times New Roman', serif;
    line-height: 1.2;
    font-weight: normal;
}

The selectors in the above example have some properties where the values are the same and others that are different. To group them together ...

The Short Way, Part 2

/*Grouped first by selector*/

h1, h2, h3, h4 {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

h1, h2 {
    margin: 10px 0 15px;
    line-height: 1.3;
}

/*Groupings by declaration*/

h3, h4, p {
    line-height: 1.2;
}

h4, p {
    margin: 10px 0;
}

/*CSS rules-sets with unique values*/

h1 {
    font-size: 30px;
    border-bottom: 1px solid #cccccc;
}

h2 {
    font-size: 26px;
}

h3 {
    margin: 10px 0 12px;
    font-size: 22px;
}

h4 {
    font-size: 20px;
}

p {
    font-size: 16px;
    font-family: 'Times New Roman', serif;
    font-weight: normal;
}

It's worth noting that any writing between /* and */ is just a comment, has no functional value, and can safely be omitted. Without the comments, there is a saving of nearly 30% in terms of data, between the long way and the short way.