• Reported by Alessandro

Articles on CSS organization and optimization are always welcome by webdesigners. Recently, two articles have catched readers' attention on the subject. The first one is CSS Organization Tip 1: Flags by Douglas Bowman and the second one is Modular CSS by Mike Stenhouse. Both articles advise the precious practice of organizing your CSS by sections but in quite opposite directions.

While Bowman's article suggests a precious hint: simply comment a section with a flag in your single CSS file, Modular CSS indicates a way to split a CSS in multiple files. This last technique could be good for organizing, but difficult in practice. Suppose you're going to redesign, or you may want to offer a style switcher or some alternate style sheets for instance. You'll have to deal with fragmented code and several files. I've always used a single, section-commented CSS file, but that's just a personal strategy.

Talking about CSS management: I wrote an article in Italian more than one year ago which indicates 21 tips to writing optimized CSS. One of the most valuable in my opinion is about ordering properties. Apart from some exceptional cases, the order of declarations in a rule is non influential on how the page will render, but a logical order of properties has always helped me in writing, reading and re-editing my CSS files.

When writing a single rule, I always think of it as a house building from outside to inside. So, how it is displayed and how it's positioned are the first two things. Then the special features (ie the specific element properties, such as text-decoration or border-collapse), the distance from other houses, the thickness of external and internal walls (respectively margin, border and padding) and finally the inner details: background, color and the properties about text. So, that's the ordered list of properties that I use when writing a single rule:

1. display
2. float and position
3. width and height
4. Specific element properties
5. margin
6. border
7. padding
8. background
9. color
10. font related properties

Hope you will find this approach useful as I do.