On Google Code there is a simple Ruby script called CSS Redundancy Checker which basically " given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML". This is pretty near to the correct definition of redundancy in CSS, but there is also more.
Duplicated rules
As our stylesheets grow in size, it's more likely that there will be some duplicated CSS rules. A typical example is a WordPress theme: you define a rule earlier in your stylesheet and later you realize that you need to redefine it to address new layout issues.
This happens often when you have to redesign a site by removing old elements or adding new ones. In this case you can run a text search in your editor to locate all the duplicated rules. What you need is only the initial portion of the rule, such as .post or #teaser (that is, a selector).
Empty URLs (error 404)
In CSS URL can be contained in:
@importrules- the
url()function - the
src()function of the@font-facerule.
If you've removed a file or resource because your project has changed, it's very likely that these empty URLs will raise a 404 error (Not Found) in the browser. What's more, a browser is forced to follow the given URL and try to fetch the attached resource, thus resulting in a useless waste of time.
You should always double-check all the URLs contained in your CSS file, just to be sure.
Verbose rules
As a rule of thumb, you should avoid singular properties and use instead the shorthand notation whenever it's possible. So the following rule:
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 95%;
font-weight: 300;
line-height: 1.4;
}
should be rewritten as:
body {
font: 300% 95%/1.4 'Helvetica Neue', Arial, sans-serif;
}
Useless comments
Comments should be used to:
- mark a section of a CSS file
- add metadata (as in WordPress themes)
- explain some obscure or arcane hack or filter
- note down a design choice (color palette, fonts, etc.)
- create notes and remarks for other developers in your team.
In all other cases, comments are useless.
Tight rules
Consider the following rule:
img.alignleft {
float: left;
margin: 0.3em 0.5em 0.3em 0;
}
The class specified above applies only to images due to the type selector prefixed to the class name. The problem is that if you want to float other types of elements, you can't accomplish this task without redefining a new rule with (of course) duplicated styles.
You should always try to write your rules as generic as possible by using cascade and specificity instead of writing tight rules which will always generate duplicated code.
In other words:
.alignleft {
float: left;
margin: 0.3em 0.5em 0.3em 0;
}
Conclusion
Before minifying your CSS file and use it on a live production environment, you should always check that your code is free of redundancies or inefficient code. By doing so, you make sure that the future maintenance of your code will be less prone to yield headaches or sleepless nights.
