3 Useful Tools To Optimize your Blog’s CSS

CSS stands for cascading stylesheets which is an important aspect of modern day web designing. If you are a web designer and know how to design WordPress themes or blogger templates, you can not ignore CSS anymore. However, if you have a blog and want to optimize the CSS files for better performance and quicker loading, here are all the tools that you need.

How to Find the CSS file of your blog template

If your blog is on WordPress then the CSS file is placed ideally in the themes folder under wp-content/themes/yourtheme. To know the exact location, open your blog and check the page source. You will find a link to the CSS of your theme as shown below

Css stylesheet location in WordPress theme

If your blog is on Blogger, open the Blogger dashboard and go to the “Layout” tab. Select “Edit HTML” and the checkbox “expand widget templates”. Next, copy the CSS code in a notepad file defined just after the opening body tag.

css-locate-blogger-css

Download a copy of that file and do the modifications described in this tutorial. It would be better if you take a backup of the stylesheet for if things go wrong, you can restore your site’s design by using the backup.

Optimize the CSS code

Format your CSS code

The first step towards optimization of any CSS code is proper formatting. You should carefully format the style elements and the attributes so that they are easy to understand. Moreover, the code should be written so that they do not overlap with other classes or ID’s. Formatting the code manually is a tough job and you can use the Format CSS tool to get started.

Copy the style sheet which you want to format and paste it in the text box. Next, select the preferred rules of formatting from the right panel.

format-css-tool-format-your-css-codes-stylesheet-file

For example: You may want to insert a new line after the CSS property of each div tag. You may also want to remove all the white spaces placed after a semicolon. Set all the rules which you want the program to perform and then hit the “Format CSS” button. All the specified rules would be applied and the code will be formatted as shown below:

format-css-tool-formatted-stylesheet-code

Optimize CSS to remove redundancies

Now that you have formatted your code for readability, it’s time for some optimization. Go to Online CSS optimizer and paste the entire code in the text box provided. You may also enter the URL of your CSS file, if you want.

online-css-optimizer-optimise-stylesheet

This tool can be used for the following purposes:

  • convert all the RGB color values to hexadecimal thus reducing overhead and increasing efficiency.
  • remove all the comments and white spaces.
  • optimize the border values to modern metrics. For example: the attribute border: 2px 5px 2px 5px is changed to border: 2px 5px;.
  • convert absolute values to relative ones. For example: the attribute font-size:18px; can be changed into font-size:2em;
  • converts multiple background, font, margin, padding, list attributes into a single attribute.

Clean Your CSS File and reduce Size

Now it’s time to clean your CSS code for errors and reduce the file size. Reducing the size of CSS is important as it affects the load time of your blog’s pages. Go to Clean CSS and paste the CSS code which you optimized in the earlier step. Select the compression mode as highest and select the options shown below

clean-css-cleanup-stylesheet-code-to-reduce-size

Clean CSS is based on CSS Tidy and can be used to merge shorthand properties, compress colors and font weights. A similar tool for compressing CSS code for faster loading is CSS Drive.

Some Tips

Following are some tips and tricks you should keep in mind while writing the CSS code for your blog’s template:

1. Always use external stylesheets rather than pasting the entire code before the </head> tag.

2. Use universal classes to avoid repetitions. For example: you can use a simple class div.floatleft{float:left;} to float any element to left rather than using the same attribute on multiple classes.

3. Use browser specific CSS files for fixing bugs. That means, if you spot a bug which occurs only in a particular browser ( generally Internet explorer 6 or older versions), use a separate style sheet to fix that bug. This keeps your main style sheet neat and clean.

For WordPress bloggers: Apart from optimizing the CSS code, you must check out how to reduce blog’s page load time and how you should clean up the WordPress database.

Have you optimized the CSS of your blog template yet? What are your favorite tools for optimizing CSS code? Share your ideas in the comments section.