
Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding.
This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier.
I also suggest you to download my CSS2 Visual Cheat Sheet, a practical and essential reference guide to all CSS2 properties with detailed descriptions and some example of code.
1. Order CSS properties alphabetically
When you start adding properties to a CSS element, probably you don’t pay attention to the order you are using to list them. Without doubt, a better approach to proceed is to use alphabetical order like in the following example:
#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
} In this way, if you need to change a specific properties, will be simpler to find it at a glance.
2. Indent child elements
Indenting child elements of a main element (in this example #nav) is a good way to highlight dependencies between related portions of code.
#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}3. Use comments to separate logical sections of code
Comment lines are really useful to improve code readability because, if used with certain criteria (and not abused), can help you separate sections of CSS code related to the structure of the HTML document:
/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}4. Use extra spaces and tabulations to separate single properties from their values
I think this way to organize CSS code, by using tabulations to separate properties from their values, noticeably improves the readability of CSS files but in general is rarely used:
#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}
5. Group elements with the same properties
If you have a group of element with the same properties and values you can think to group them in a single declaration and manage separately their difference in order to optimize your code. For example take a look at the code below:
.icon-facebook {
background:url(facebook.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}You can improve the previous code in this way:
.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}
Conclusion
When your project is ready to go live, I suggest you to create and publish a lightweight version the CSS file by using a CSS compressor (such as http://www.csscompressor.com/ or http://www.cssoptimiser.com/) that allows you to reduce dramatically the size of your CSS files.
If you have suggestions or other “rules” you use to improve the readability of your CSS files, please leave a comment. Thanks!
by
Antonio Lupetti is an italian engineer, pro blogger, Mac user, founder of woorkup.com. He lives in Rome, Italy. Follow Antonio on 

October 18, 2009 at 9:33 am
Nice post. I always make sure that I do something like this.
Except I think that it would be more useful to group related properties together, instead of having to make sure everything is in alphabetical order.
October 18, 2009 at 9:42 am
Hmm, I do all but 2 of these things in my CSS [indent children + alphabetical-ness]. I agree with Eric B. but I’m sure some people will find it useful.
October 18, 2009 at 10:17 am
Hi Antonio!
Thank you for this cool post and the blog also. I would be very happy if i could also read it on my phone. As I can see, the old blog works with mobify.me. Is it possible that you make a mobified version of this site too? It would be nice if I can read your tips on the go!
Anyway, thank you for the new site, its awesome! -Csongor.
October 18, 2009 at 10:19 am
Cool post, I already do most of those things but I still learned some.
I hate reading a css file when it’s badly formated.
October 18, 2009 at 10:26 am
Nice one, I’ve been following these rules. Really helps to makes your life that much more easier. ;)
October 18, 2009 at 11:30 am
Great post. Thanks for sharing I kinda to the same in my works.
October 18, 2009 at 11:32 am
While I think these suggestions are a good idea, writing alphabetical CSS isn’t practical in my opinion. I’d prefer to organise it with related properties, similar to Eric B.
October 18, 2009 at 11:40 am
You Totally ROCK With WOORK !!
October 18, 2009 at 12:04 pm
Nice, will try to follow this. Thanks for sharing. :)
October 18, 2009 at 1:55 pm
thanks for this info.
October 18, 2009 at 2:19 pm
Great article, you may also be interested in looking at CSS preprocessors like Less:
Original Version (Ruby): http://www.lesscss.org
.NET version: http://www.dotlesscss.com
PHP version: http://leafo.net/lessphp/
October 18, 2009 at 3:37 pm
I like the idea of tabulating all the values, and I definitely alphabetize everything—it has made such a difference to my coding habits since I started doing this. At first I was skeptical, because as other commenters have observed it seems more intuitive to place similar elements together. But I’ve always found that actually putting that into practice is not so easy. Do borders belong with margins, and padding with background—or do margins and padding and borders and background belong together? There are heaps of ways to do this, and it becomes very hard to maintain consistency (especially if someone else has to then work with your code).
Using an alphabetical order on properties just simplifies the whole system so much. Because I don’t have to think about where a property should go in terms of its relation to other properties, I code a lot faster and concentrate more on the actual styling. I’m sure this won’t work for everyone, but I’d suggest that it’s worth a shot.
Indenting nested elements, on the other hand, really does not work for me. At first I thought it was a great idea and started doing it, but it just got amazingly confusing and messy. I find it awful.
October 18, 2009 at 4:18 pm
Another vote for grouping related properties instead of an alphabetical order. I also tend to write properties in one line and not in one line for each because it would get too bloated most of the time, not a big fan of too much scrolling ;-)
October 19, 2009 at 4:39 pm
You dont really have to waste your time with thinking about the alphabetical order of the properties there are sites like http://www.codebeautifier.com/ that will do the job for you ;D
October 18, 2009 at 4:27 pm
I alphabetize the groups of properties in each selector.
Otherwise, great article! :)
October 18, 2009 at 10:33 pm
Like a lot of CSS writers, I’ve got my own system of property order:
Dimension properties (width, height)
Position and float properties
Spacing (margins, padding)
Box decorations (borders, backgrounds)
Typography
It just makes sense to me to write them in that order, so it doesn’t take any extra time to organize.
Tabbing in nesting element is probably a good idea, (I don’t do it often because of the extra time needed to keep things organized and lined up). I imagine it could get complicated, but that’s probably just because it would reflect a complicated HTML structure.
October 19, 2009 at 2:30 am
I agree with paul, however, I never had any specific ordering after dimensions and positions. I may adopt your technique as it’s close to mine.
October 19, 2009 at 2:56 am
These are some good tips but I’m not sure about the spacing between the attribute and it’s property. What if 1 attribute is super long, then your eye won’t be able to make out what each property is related to.
Other than that nice 1
October 19, 2009 at 3:32 am
nice tips, I always have a big problem finding the code. lol
October 19, 2009 at 3:41 am
Great article!
Coding is an Art!
October 19, 2009 at 6:46 am
For people that code CSS horizontally ( .something { display:block; padding:4px; border:1px solid #ccc; } )
#2 and #4 don’t seem to apply.
Also for “Group elements with the same properties” take it a step further and code the .icon PATTERN separately:
.icon { padding-left:26px; margin-right:20px; width:100px; }
.icon.facebook{background:url(facebook.gif);}
.icon.twitter{background:url(twitter.gif);}
.icon.delicious{background:url(delicious.gif);}
October 25, 2009 at 12:24 pm
I thought the same thing about the icons. Assigning multiple classes for something like that is one of the best things about CSS.
October 19, 2009 at 7:16 am
Nice job! I also group styles by my own order as opposed to alphabetically. Box-model properties first, positioning second, then font styles and visual presentation rules.
One big thing missed here is starting all stylesheets with a table of contents. I put a block comment with the date modified and author at the top, as well as listing hex values for default colors.
This has helped immensely with returning to old sites after a year or more.
October 19, 2009 at 7:27 am
nice! easy to implement & follows good practices
October 19, 2009 at 7:29 am
Why write them alphabetically? Writing them in the order they appear in the HTML markup is way better. Ordering them alphabetically will be harder to scan for related elements that may clash in styles, add unnecessary overweight to the file size and so on…
October 19, 2009 at 12:45 pm
Not the CSS elements, but their properties!
October 19, 2009 at 7:53 am
Several of you guys are missing the point… Alphabetically is only the first idea listed, not the only one. #3 says to separate based on logical sections of code.
So, create your sections, then separate alphabetically within those sections.
This rule should have been listed before the rule about alphabetical order to avoid confusion. Otherwise, fantastic list.
October 19, 2009 at 12:33 pm
@Bogdan Pop: The point is not to order the CSS elements alphabetically but the properties of each element.
October 19, 2009 at 3:20 pm
Some useful tips but I too sort my elements by type rather tan alphabetically, much clearer that way
October 19, 2009 at 3:22 pm
In this post I meant to sort alphabetically the properties of CSS elements and not CSS elements!
October 19, 2009 at 4:30 pm
nice tips, but I think is difficult to sort alphabetically the properties.It could take some time.
October 19, 2009 at 7:49 pm
Writing the properties in alphabetical order is not a good thing.
Group them in a logical way. And you have too much spacing between the lines.
It will increase file size and from my experience is harder to scroll and find the content.
October 19, 2009 at 11:43 pm
Very useful for my blog developers
October 24, 2009 at 10:30 pm
It was very useful, thank you very much for your suggest !!!!
My best regards
From Chihuahua, México
November 3, 2009 at 8:15 am
Take it easy, but I think you should reconsider your post by web industries workers or ague a little more your steps. To my mind most of the steps you’re citing are not possible.
From my experiences in web industries and web agencies:
You can simply forget about 1, 2 and 4:
1) Everyone likes to group properties by alphabets OR categories OR his/her own preferences
2) Any kind of way to indent selectors will finish as exotic css files. Break line only if need be
3) Css should not be indenting as html. css is more like queries than data descriptions.
4) It won’t work, some developers will get a pain while developing the pages
5) It won’t work, it will not be maintainable
Just make developers agree about using 3 and 5 and typically, it’s
* Setting a short informative headers
* Grouping selectors by sections
* Grouping selectors with the same properties
* Only indenting the properties
Then the top of the top and the most boring is FINDING A FEW MINUTES to talk about editors:
* USE SPACE AS UNIT
* USE OPTIONS such as virtual wrap, virtual tab, tab space, reformat mix tabs, etc… so everyone can code in a way that doesn’t hurt the neighboord. Yes they can display the css in a way nearest to their but they didn’t know it.
By default every developer thinks his config is the best in the world. His editor is not oriented team, it was configured to override any display that doesn’t match Mr Smith the guru. You can come in a random company and say “That’s the way we should work”, it won’t work. Just explain a few requirements, give them liberties, talk about editors, and then everyone should be able to work anywhere with any members on the same basis. Evangelizing web is also evangelizing web related tools.
Actually, sorry wookup readers if I hurt you, we don’t care how you like ordering the css properties as we don’t care how you prefer chocolate than strawberry. A company or manager or leader just want you to be able and to enjoy working anywhere on any projects with any co-workers. That’s all web development is about: team work !
Please bring Wookup higher ! ! ! !
Thanks and cheers
November 7, 2009 at 11:47 am
A nice little round up there. I agree and practice all of these except #4 – ‘Use extra spaces and tabulations to separate single properties from their values’. I find reading CSS selectors that have dirty great gaps between their rules and values really difficult on the eyes.
November 8, 2009 at 10:32 am
hi nice practice for me. i got idea …i love your posts
keep posting like this, awesome cool
November 8, 2009 at 3:28 pm
Thanks Antonio! Any coding help is like a gift from heaven…
November 9, 2009 at 3:06 am
Thanks for lesson, great article!
November 15, 2009 at 5:52 am
You could also do efficient CSS using CSS shorthand properties:
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
http://www.dustindiaz.com/css-shorthand/
CSS compressor for fast loading and efficiency:
http://iceyboard.no-ip.org/projects/css_compressor
http://www.andy-roberts.net/software/csscompressor/index.html
CSS spirtes for faster loading:
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://www.tutorial9.net/web-tutorials/building-faster-websites-with-css-sprites/
November 16, 2009 at 3:00 am
nice post, very helpful, thanks
November 16, 2009 at 4:23 am
I never knew that there is CSS compressor. It works like a miracle. Thanks a tonne Antonnio.