The whole point of optimizing CSS is to make you CSS file smaller and your HTTP requests at minimum. That means less characters in a file that you can possibly make it and using some techniques for reducing HTTP requests. Here are some examples how you can optimize your CSS.
Note: These tips and techniques for CSS Optimization are not sorted in any way.
When coding CSS you can combine multiple properties.
For example, instead of:
You can use:
Also this technique you can use for background, font, padding etc.
Note: Every value that is 0 (zero), you can write it without any units like px, pt, em or %.
This is maybe one of the best technique that will save you a loot of space if you have big CSS styles. Let's say that you have next example:
Instead of writing the same properties for the different elements you can write something like this:
Creating beautiful websites wouldn't be posible without colors. These are some examples on how you can replace existing hexadecimal values with shortened version of the same.
While putting your CSS in external file you optimize your HTML code and the best part is that this way CSS gets cached, otherwise your browser will download CSS styles every time.
Note: Don't use inline CSS!
This is one of the examples for reducing HTTP request. If you have more that one CSS file it is recommended that you put all your CSS into one file.
Before:
After:
This is also one of the good tips but this could be dangerous. A loot of white spaces are unnecessary and they don't have any purpose.
For this optimization I sugest that you use some software like our CSS Optimizer if you are not sure which white spaces are safe to remove.
New Lines are also one of the big problem when it comes to space.
This is two way street. Striping new lines leaves you with poor format but saves you a lot of space.
By Yahoo putting CSS in the HEAD of your document makes pages appear to be loading faster.
Also, putting stylesheet in HEAD can avoid two problems:
- the blank white screen and
- flash of unstyled content.
We all like when we see beautiful code format but you have to ask yourself: "Is it worth it?".
Instead of:
use:
Always specify styles in CSS. Don't add styles directly to elements of an document.
Instead of:
use:
We all know that using a lot of images from CSS is a common thing. With advantage of CSS Sprites we can reduce the number of HTTP requests. Combining more images into one image is a great way to save bandwith.
Showing segments of images are done through background property.
You may not know this, although it is small change it still count.
Instead of closing style element like this:
close it like this:
Without ";".
When coding a CSS file try to avoid using property values that are native to the specific element. Like on this next example:
A detailed testing and analysis showed that using @import can slow your website performance.
Note: Link CSS, dont't use @import.
Avoid using pictures if you can replace them with pure CSS.
When you create a CSS reset, add only those elements that you actualy use for the website. This will save a few bytes.
Don't use them if it isn't really necessary. These are tightly connected with Direct X and users with older machines will have some issues when it comes to OS or video card.
Sometimes during development there is more css classes than we actually need. This often happens as a result of changing the design and so on. T ry to remove the classes that you do not need.
Note: Arguable.
When you write numerical values, do not include any extra zeros. Instead:
Use:
If horizontal and vertical values differ, like this:
You can replace it with:
If you have version specific styles for IE, use conditional comments to load these as external stylesheets like this:
Note: Remove unnecessary white space from the code that we added for correct viewing purposes!
There are many reasons why is CSS superior to tables but here, we are interested in only one. Speed.
Table-based layouts have big amount of junk markup so try to avoid using tables when you don't need them.
"Visit us every day for some new exciting informations.
All the best."
- Lukic Milos