I’ve started habitually formatting any CSS I work on under the same structured format. Even when working on older1 style-sheets I end up re-formatting the entire list to follow the very same set of rules.
Now, everyone has their favourite approach and I’ve found one or two that have fit quite well in the past — sometimes I need to comment the code to remind myself why the hell I’m doing what I’m doing. Trying to find the right spot for comments, that doesn’t break up the flow, yet actually matches the individual tag being described, can be a bit of a challenge. At least, it is for this author.
Ever had that feeling where you wonder quite why the.fred class was left aligned despite logically not needing it, so you ditch the tag, only to remember a week down the track when some obscure browser or situation required it to fix a formatting bug?
We’ve all been there at some point. Documenting XHTML code is always useful.. but documenting CSS use can make the difference between an out-of-control style-sheet versus something a tad more user friendly.
White space is helpful in separating mark-up, but there is an inevitable trade-off in processing, particularly given that virtually all web browsers have absolutely no interest in neat-and-tidy spacing. So how do you keep things damn well under control and readable if you compress the life and comment out of it?
May I present the super-galactic-half-assed-ninja-foo coder’s guide to CSS formatting — example taken from the current tumblr design:
The formatting is based on an opening brace immediately followed by tags, on a single line if possible, with a single tab against closing brace. Comment’s are placed after the closing brace as needed. It also allows for tidy, structured comment that can be peppered with descriptive text that promotes an easy search-based ethic.
By stepping the closing brace one tab, I’ve found it a lot easier to quickly find elements without necessarily having to use search. It also creates a tab-like bookmark effect, making usually complex single line CSS somewhat easier to read.
Here’s the same example with CSS syntax highlighting disabled — even without highlighting it’s still quite legible:
I’ve found the amount of compression that can be gained by tossing out all but useful comment and it’s associated white-space seldom breaks 10%, at most a quarter-second improvement dependant on length.
Most CSS compression related improvement is typically gained by turning multi-line elements into using a single-line2 declarations. Since the above does so to begin with, there is very little left to jettison.
Do you have a particular methodology in CSS style-sheet use? Do you prefer the clarity of white-space or the speed-freak single line markup option? Send an email or drop me a line and I’ll describe your technique in any follow-up article.
- although I haven’t quite updated this sites CSS, yet. (↩)
- i.e. removing white-space and \n new lines (↩)
≡ This is a journal entry relating to the topics of No Tags.
Brendan Borlase is a Systems and Network Administrator living in Adelaide, Australia, having lived, worked and breathed Information Technology for over 12 years. Learn more.
Feedback is encouraged. If you would like to read more, consider subscribing to the regularly updated RSS Feed.
