A great bug bear of mine is when I get handed CSS from another developer that is completely non maintainable. Here I look at some examples to illustrate on how not to present CSS and how to keep it maintainable.
Use the cascade
Even if you use only one or two !important statements, you will find that you are disrupting the natural flow of your CSS and will find certain parts of your CSS harder to maintain. CSS property importance happens naturally through using the cascade/specificity and shouldn’t be disrupted by using !important.
Create well formed, semantic and readable stylesheets
Now I am a big fan of keeping my CSS neat and tidy, not just for myself but for others to work with too. It makes projects flow quicker when you have a maintainable stylesheet. No one will tap you on the shoulder to ask you where something is or why doesn’t something do as it should. If everything is neat and tidy and commented correctly, everything you/they need to know is right in the stylesheet. Like reading a book.
Keep it sexy!
Jina Bolton wrote a comprehensive article on writing maintainable stylesheets back in 2007. I highly recommend this approach and use it on every project I work on these days. You will thank yourself for it and so will your fellow developers.
Conditional comments
How many times have we seen IE specific style sheets with only a couple of rules in? What a waste of a HTTP request! There will come times when we may need to use am IE specific style sheet, especially on more complex projects, but to plonk one or two rules into one style sheet is bordering on insane!
One workaround is to use conditional comments as explained in this article by Paul Irish. Instead of using a separate IE specific stylesheet, we can instead place those one or two IE only rules at the bottom of the stylesheet and appending a class to it. See example below:
1 2 3 4 5 | <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> |
1 2 | .content {color:#ff9900;} .ie6 .content {color: #cccccc;} |
