Writing a clean and optimized CSS requires a lot of practice and dedication. Since keeping your CSS optimized and small is not all about writing a neat and clean code, it’s useful specifically with large websites where it results less page load time and decrease bandwidth usage. Reducing the file size of your CSS stylesheet by even a few kilobytes can have a considerable effect on your page load time. Apart from this, you can also compress your CSS code automatically using several online tools.

Here in this article, we’ll examine some smart techniques to optimize your CSS and major online tools that optimize and compress CSS automatically.

1. Minify CSS

Minifying CSS helps to reduce file size by removing white spaces and optimizing your code. Minifying CSS does make your code dificult to read, so I suggest you to use automatic compressor (CSS Closure Compiler) that keeps your working file separate to minified CSS file. You just need to compile your working CSS which will create a minifed CSS to update on live server.

2. Use CSS Image Sprite

The main goal behind CSS sprite is reducing the number of HTTP request to reduce page load time. An image sprite is collection of multiple images put into a single image. For example: if we’ve three separate images to display, first we will merge all three images into one image and with the help of CSS, and we will show just the part of the image we need. For more detail go through CSS Sprites tutorial at CSS-Tricks.

3. Inlining a small CSS

As browser block external CSS files before displaying content to the screen that increases the time it takes to display content to the screen. So remember, if external CSS is small then you can insert that directly into HTML as inline. Inlining small CSS in this way allows the browser to proceed with rendering the page fastly. Keep in mind if the CSS file is large, never use inline CSS which may cause your page speed insights due to large page content.

4. Don’t inline large data URIs

Always be careful when inlining data URIs in CSS files. It’s ok if you are using small selective data URIs in your CSS but never inline large data URIs that can cause the size of your above-the-fold CSS to be larger, which will slow down page render time. Just go through this tutorial for more details about above-the-fold CSS content.

5. Don’t inline CSS attributes

Try to avoid using inline CSS attributes on HTML elements as much as possible that leads to the unnecessary code duplication. As the inline CSS on HTML elements is blocked by default with Content Security Policy.

6. Group Similar Styles

Always group similar style instead of declaring the same styles over and over again without knowing that some other simple and short way. So make a habit to analyse each style so that similar styles can be grouped like below:

Before Group:

h1 {padding:6px 0; font-family:verdana; font-weight:600;}
#panel1 .heading  {padding:6px 0; font-family:verdana; font-weight:600;}
#panel2 .heading  {padding:6px 0; font-family:verdana; font-weight:600;}

After Group:

h1, #panel1 .heading, #panel2 .heading  {padding:6px 0; font-family:verdana; 
font-weight:600;}

7. Number of Line Breaks

Always remove the line breaks which occupy precious white space.

Before

h2 {
    font-family:verdana;
    padding:0;
    margin:6px 0;
    color:#333333;
    text-decoration:underline;    
}

After

h2 {font-family:verdana;padding:0;margin:6px 0;color:#333333;text-decoration:
underline;}

8. Use CSS Shorthand

CSS shorthand help us to reduce and optimize CSS files. Instead of multiple lines of properties, we’ll able make into one line.

Before

p { margin-top: 5px;
    margin-right: 10px;
    margin-bottom:  20px;
    margin-left: 30px; 
}

After

p { margin: 5px 10px 20px 30px; }

9. Remove the last semicolon

It’s a good practice to exclude semi-colons at last on a large scale that results in better load times.

Before

.foo {
    background-color: #F00;
    color: #000;
}

After

.foo {
    background-color: #F00;
    color: #000
}

10. Remove unused classes

With the changes in design during development, some of the classes that we have created might not in use. We often leave these but it’s not good practice. Always remove unused class and code from your css before moving to live server.

11. Splitting CSS files

You can split CSS file into various stylesheet to target multiple browsers like IE, Chrome or Firefox. For example, instead of trying out CSS hacks in a single stylesheet, you can use IE conditional statements to load a different stylesheet for different IE version(IE6,IE7, IE8 etc). It will avoid loading IE while using Chrome and you will reduce file size to a great extent.

12. Put CSS at top and JS at bottom

Always put your CSS stylsheet at the top of your page between head tag and your Javascript at the bottom of page. Try to load your CSS code before the rest of the page and Javascript. Javascript should be kept at the bottom due to its increased size and its effect on website speed.

13. Use simple comments

Always use simple comments with your styles.

/************************************/
/*          Content Page            */
/************************************/

Above should be:
/* content page */

14. Remove “px”

Remove unnecessary “px” from your styles.

h2 {padding:0px; margin:0px;}

Above should be:

{padding:0; margin:0}

15. Use CSS Compression Tools

If you don’t want to do all that manually, you can always use the following CSS compression tools that do thing automatically:

CSS Drive

Smart Techniques to Optimize CSS

CSS Optimizer

Smart Techniques to Optimize CSS

Clean CSS

Smart Techniques to Optimize CSS

CSS Compressor

Smart Techniques to Optimize CSS

Style Neat

Smart Techniques to Optimize CSS

email