Basic CSS Optimisation Principles

As an exercise in keeping my skills sharp I decided to see how far I could optimise this website’s CSS (cascading style sheet), and set out a basic set of principles to follow when writing CSS to keep the code concise and with as little repitition of values as possible.

After a mere 15 minutes I reduced the old style sheet from 4,267 bytes to 3,470 bytes in the new style sheet, a 19% reduction. While the size reduction is not a huge benefit in the scheme of things, it does mean that I can change certain values that are common to many page elements like font-weight : bold; to another value eg: font-weight : bolder; in one place and have the change made though all the grouped elements at once, rather than having to change it half a dozen times in different selectors throughout the stylesheet.

Bearing in mind that the CSS had already been optimised to some extent when first coded … these are some of basic principles I applied:

  1. Simplify repeated values, eg: the code below means that the top, right, bottom, and left margins (in that order) should all be 0 pixels.

    margin: 0px 0px 0px 0px;
    becomes
    margin: 0 0 0 0;
    because when the value is 0 it doesnt need a measurement like px, %, or em.

    margin: 0 0 0 0;
    becomes
    margin: 0;
    because when the top, right, bottom, and left values are all the same specifying the value once will apply it to all sides

    This works in exactly the same way for padding values.

  2. Use shorthand for colour codes eg: the code below which makes an element light blue.

    color: #0099ff;
    becomes
    color: #09f;
    because the color is made up of RGB (Red, Green, Blue) values in groups of 2 digits (00,99,ff), and if the 2 digits in each group are the same as each other, than the colour code can be simplified using the first digit of each group color:RGB;

    This works in exactly the same way for background or any other page elements colour value.

  3. If 2 declarations contain the same selectors and values eg: the code below which makes certain elements have a white background, 2 pixel border that is light blue in colour and outset in style:


    #contactus input:focus, #contactus input.sffocus
    {
    background: #ffffff;
    border-width: 2px;
    border-color: #0099ff;
    border-style: outset;
    }


    #contactus textarea:focus, #contactus textarea.sffocus
    {
    background: #ffffff;
    border-width: 2px;
    border-color: #0099ff;
    border-style: outset;
    }

    becomes
    #contactus input:focus, #contactus input.sffocus,#contactus textarea:focus, #contactus textarea.sffocus
    {
    background: #ffffff;
    border-width: 2px;
    border-color: #0099ff;
    border-style: outset;
    }

    because the 2 declarations contain the same selectors and values they can be declared in a group. But thats not all!

    #contactus input:focus, #contactus input.sffocus,#contactus textarea:focus, #contactus textarea.sffocus
    {
    background: #ffffff;
    border-width: 2px;
    border-color: #0099ff;
    border-style: outset;
    }

    becomes
    #contactus input:focus, #contactus input.sffocus,#contactus textarea:focus, #contactus textarea.sffocus
    {
    background: #fff;
    border: 2px outset #09f;
    }
    because I applied colour code shorthand for the background value, and then simplified the 3 seperate border propertiesinto 1 by also using shorthand, in the order border(width,style,colour);.

    You can learn more CSS shorthand at Sitepoint’s Introduction to CSS Shorthand and there are a lot more tips on optimising websites in general in my article The Need for Speed : Website Optimisation.


2 comments on “Basic CSS Optimisation Principles

  1. RallyFan on said:

    Removing all the spaces, carriage returns, tabs and so on will also reduce the size. It will make the CSS a little less readable of course, but if finalised it can help further compress the filesize.

  2. Jaime Cook on said:

    I’ve learned Jens Meiert’s maintains a list of CSS properties, including those in working drafts, with links to the relevant specifications. Highly recommended.

Leave a Reply

Your email address will not be published.

HTML tags are not allowed.