Optimising the CSS code of your website not only makes it easier and efficient for you to edit it in future but, it also reduces the size of your website be it just a few kilobytes. Even the reduction of few kilobytes of your CSS file size leads to a faster website, and you know how vital role a website speed plays when it comes to luring search engines like Google and your online potential customers.

It always works in your favour to have an optimised and minified CSS code. Having optimised CSS not only saves your time but, it also takes you out of stress and misery that you have to go through with complex and mixed codes. There are tons of CSS optimisation techniques found online which you can implement in your code and free yourself with CSS stress.

In this article, I have compiled a list of techniques to optimise your CSS code which is used by most of the designers and developers today. Before going to these techniques, make sure to have a single stylesheet for your website and use the standard name of it, style.css. By doing this you can have everything together in the same place which makes your editing process more efficient.

Now, let’s move on to learn the smart and efficient techniques to write CSS code of your website. Here’s a list of top techniques to smartly optimise your CSS code for the faster website.

Choose the Right Code Editor

With a large number of code editors available in the market today, most of the people are found confused while choosing the right code editor for them. Web experts with their experiences know the right editor that matches their preferences but, for inexperienced and beginners, they have no option except following the experiences of others and using the editor they see being used by other designers.

Make sure to choose the code editor that makes you most efficient and that matches your preferences. If you are a window user then, I would recommend you to use Notepad++ that is what I use. Notepad++ has features such as syntax highlighting, syntax folding, tabbed files, auto completion, multi-view, and much more. It is free of cost. Besides Notepad++, you can also use Sublime text, PHP Storm, CSS edit and TextWrangler if you are a Mac user. Check out the features of your interested editors and start with the editor that you think have everything that you are looking for.

Code in Style

Once you find the code editor that you are going to use, establish a set layout that you will use throughout your entire CSS stylesheets. Doing this, you can further streamline your CSS files. Use the most commonly used CSS formatting, where “#” or “.” are used to define ID or Class followed by the bracket “{}” into which you insert the CSS properties of your need. Your CSS code will look more organised and clear to understand. For example,

.header {

width:800px;

height:300px;

margin;20px;

}

Keep your CSS layout crystal clear and clean like above. Never forget this mantra, Code clean, the code in style.

Use Shorthand

Shorthand properties of CSS let you specify several properties by using a single one. Using this property, a web developer or designer can write more concise and more readable style sheets saving their time and energy. If you are an experienced coder then, you must have already implemented this practice but, if you are a beginner and have just found out about this practice then, start implementing this practice from today.

CSS properties like border, margin, padding, background, font, list-style, and outline, they all allow shorthand practice. Let us take an example of margin property.

.head {

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

}

Now, implementing the Shorthand practice, we will get the following code for the above CSS code with different declarations:

.head{ margin: 10px 20px 30px 40px; }

The browser will automatically specify the rules in a specified manner like below:

1st value (10px) = margin top

2nd value (20px) = margin right

3rd value (30px) = margin-bottom

4th value (40px) = margin left

With the use of Shorthand, you can number of lines, spaces and characters, which decreases your CSS file size.

Use Image Sprites

Image Sprites is used especially to reduce the size of your CSS file to decrease the page loading time of a site. If a web page contains many images, particularly, many small images like icons, buttons, etc. then, it will take a long time for a page to load and generate multiple server requests. In such case, using the image sprites instead of too many separate images will significantly reduce the number of HTTP requests that a browser makes to the server. This results in the improvement of the loading time of web pages and overall site performance.

So, make sure to use image sprites if you have too many of small separate images. Though it is a traditional technique but, it is a proven method to reduce HTTP requests to the server.

Organise your CSS code by location

Organising your CSS code is one of the most important yet overlooked tasks by most of the web designers. With the numbers of CSS classes and IDs used in the stylesheet, it is important for you to well organise your CSS codes and by the right location. This will not only help you to reduce your CSS file size by a great margin but, it will also help you to boost your website speed.

Organise your CSS code into right hierarchical branches which lead to minimal duplication. For example, place the CSS styling of the header at the top location with the right styling name that is header and places the styling of the footer to the bottom. This will not only make your CSS stylesheet look well organised but, will also make it easier for you to find the style you wish to edit quickly saving your time.

It is the best always the practice to put your CSS stylesheet at the top portion, between the <head></head> tag and JavaScript at the bottom. JavaScript has more size and it takes more time to load. So, keeping your CSS code at the top makes it load before its rest of the page.

Reduce unnecessary codes

Once, you have worked on the structuring of your CSS codes check for the unnecessary codes that might be taking lots of space in your stylesheet. You can use tools like unused CSS to remove unnecessary codes. Unused CSS explores all CSS codes in your page and removes the unused ones.

CSS has such nature that, its classes and IDs automatically inherits styling from their parent which removes the need to double up the styling. Therefore, define a number of key styles at the beginning of your stylesheet to remove the need to define styling for every ID and Class. The use of this technique will definitely help you to reduce the size of your stylesheet. You can use tools like Google Chrome Web Inspector to check which styles are being inherited and from where. And then, remove the unwanted duplications available in your stylesheet.

Limit the use of Whitespace

Whitespace such as space, tabs, line breaks, etc is used in the stylesheet for maintaining readability. However, using this whitespace can take up lots of bytes putting extra added weight to your CSS file which is the reason to slower site loading.  So, it is always best to try to reduce the whitespace in your CSS file.

Reducing whitespace in your CSS file does not mean that you have to eliminate all the whitespace. It will affect the readability of your website. So, instead of trying to eliminate all the whitespace, limit the use of whitespace. Try to maintain the readability of your website. For example:

h2 {

font-family:calibri;

padding:5px;

margin:10px 0;

color:#eee;

text-decoration:underline;

}

/* you can do it like this */

h2 {font-family:calibri;padding:5px;margin:10px 0;color:#eee;text-decoration:underline;}

Document and CSS Comment

Make documentation of your CSS code. It is one of the good practices that you need to do. The use of CSS code helps you to identify your useless CSS code and distinguish different sections of your stylesheet. CSS comment is found in /* */ format, where comments are passed after “/*” and finished before”*/”. An example is given below,

.body {

font-size: 62.5% /* 1 em = 20px */

}

In above example, the stuff inside /* */ is known as CSS comment, which gives the reader an idea about that particular line allow the use of ems to set font size later in the CSS in more intuitive base 20 way.

Note: CSS comment should be short and simple. Make sure that your CSS comment is not lengthier than your actual CSS.

Make Use of Compression

You can find a lot of tools to check and optimise your CSS codes online. Some of the great tools can easily optimise a CSS stylesheet by eliminating unused portions, unwanted whitespace, comments, tabs and change long declarations to short notations. Isn’t it the great way to save your time and effort?

Some of the tools that I use are CSSTidy, YUI Compressor, CSS Optimizer, etc. All these tools can compress unwanted whitespace in your stylesheet, detect and remove the comment and change some of the lengthy code to shorthand.

Wrapping Up,

CSS file optimisation is surely not the most important factor while comparing with other website factors but, optimising it can surely be a good consideration for both your site and end user. With the above-mentioned tips, you are surely going to create well organised and smaller CSS files that are easier to find and edit whenever you need in future.