hellorobot.org

I learned what I know of (X)HTML, CSS, PHP, et al., on my own – through trial and error, through a few good books, through online tutorials. One of the side effects of learning this way is a lack of an awareness of institutionally-approved standards.

There is no proper way to organize a CSS stylesheet, I suppose, but I’m sure that if I had learned CSS in school I would have (by choice or by requirement) adopted a professor’s or department’s standard. Instead, I made up my own, and then joined the corporate world and discovered, well, mine’s not the norm.

I like to organize my stylesheets so that all of the declarations for one selector are on one line. I find it easier to scan and, thereby, easier to update and maintain. Here’s an example of what I’ve come to realize now as more common CSS styling:

div#topmenu {
width:528px;
height:25px;
text-align:right;
}div#topmenu ul {
display:block;
}div#topmenu ul li {
font-size:9px;
line-height:25px;
display:block;
float:right;
position:relative;
height:25px;
margin-left:14px;
}div#topmenu ul li a {
color:#fff;
font-weight:bold;
text-decoration:none;
}div#topmenu ul li a:hover {
color:#1e6fa6;
}

And here’s how I’d write it:

div#topmenu {height:25px; text-align:right; width:528px; }div#topmenu ul {display:block; }div#topmenu ul li {display:block; float:right; font-size:9px; height:25px; line-height:25px; margin-left:14px; position:relative; }div#topmenu ul li a {color:#fff; font-weight:bold; text-decoration:none; }div#topmenu ul li a:hover {color:#1e6fa6; }

Each selector has its own line and declarations are ordered alphabetically.

Whitespace in a language like PHP or Java promotes a kind of readability by offering space between each bit of behavior in the code. This space makes discerning the code’s functions and limitations an easier task: it enables following a string of ideas one idea at a time. The important aspect, in comparison to CSS, is that the ideas are connected from one line to the next. What one line communicates is explicitly dependent on the lines prior to it.

CSS is not like this. A single declaration in CSS may override a declaration further up in the hierarchy, but a developer’s understanding of the declaration is not dependent on the previous declarations.

So why take up so much space? Especially when I’m so often writing CSS in the frames of the Firefox developer toolbar or Firebug where space is limited to 4-5 lines. Written my way, I can see and edit a whole module’s worth of CSS at once.

Plus, a single-line CSS style is a shorter document, by an order of 5 times or more: a 500-line stylesheet easily condenses to 100 lines. It makes scrolling for selectors so much easier.

I understand that a multi-line style creates a 1-1 relationship between line number and declaration, which eases debugging. But that’s a one-time gain; and if a particular line in my condensed CSS is particularly hairy in its buginess, I can just expand it to a multi-line style until I’ve tracked down the trouble. Honestly, though, I’ve never needed to do this. A line of CSS is rarely long enough to become so confusing that I cannot find the error.

It’s mostly irrelevant, mostly relegated to personal preference, but I wish that there was more encouragement of standard practices in CSS code, in PHP code, in any open-source, widely-used language. Standards would improve readability across developers and might contribute to more sharing and a greater community productivity. Or maybe that’s just a dumb, geek mini-utopia. Ah well, I hereby put forth my humble vote and meager case for a single-line CSS style. Try it; you might like it.