kmcm

Web Development with PHP, HTML, CSS, & JavaScript

Inline CSS Formatting

Sunday 21st December 2008

CSS formatting conventions are changing. Or at least they should be. A year and a half ago I read this article written by Steve Smith of Orderedlist. I'd been using CSS in my websites for 5 years at this stage, having progressed from the odd inline style, briefly on to embedded styles, then advancing to properly linking an external file for use throughout the site. But from the time I learned how to code CSS, I'd only ever seen it formatted the one way. The "right" way.

This article completely changed my mind, and my ways, and I found it remarkable that every single point made perfect sense to me. What Steve Smith proposed was a break in the convention, to write CSS using one line per selector (or in fact, group of selectors), instead of the old-fashioned one attribute per line, indented way.

I adopted this style of CSS straight away and haven't looked back since. It's now almost 2 years later, and I've yet to see this style reach the mainstream, and I don't know why. My reasons for using this method are simple:

Easy searching

Tweaking code and adding code is a lot easier. Instead of searching through screen after screen of indented code, all the element selectors are lined up, and you can zip down through them a lot faster. Since the file itself is more compact, there's less of a file to search through too. On the other side of the argument, people say it's more difficult to find the required attribute, but search time will be down, because your finding the section in which your attribute lies much quicker.

Easy to view related elements (and their cascade)

One of the techniques I use is to group like or related selectors together, seperated from other "sections" by a line or two of whitespace. This makes searching quicker (it's easier to remember where in the code your section is), and means you can view the relationships and effects that elements have on each other without having to scroll, they're on top of each other. For example, I tend to go from parent through child and state:


#nav {}
#nav li {}
#nav li a {}
#nav li a.this {}
#nav li a:hover {}

You can clearly see any attribute that's liable to effect on any other in that particular section of your code.

Commenting

When grouping sections of CSS together, it's also quite handy to be able to comment , making it easier to distinuish each one from the next. This makes it a lot easier for other developers to understand your code, they're not left guessing which section relates to where. Eg:


/************ global site navigation *********************/

#nav {}
#nav li {}
#nav li a {}
#nav li a.this {}
#nav li a:hover {}

/************ main content area *********************/
#content {}

Filesize

Ok, so removing most of the whitespace from a standard CSS files won't make much of a different. For the average small-business site it'll save you 1kb at most. But it is an advantage, that will make your page load faster, and save on transfer overheads.

Time

Not having to indent my CSS saves me a lot of time. Simply put, I press the return and tab keys a lot less these days.

Filed under: