Friday, September 12, 2008

CSS in one line

There was a bit of drama over it on Ajaxian recently. Personally, I like CSS properties in alphabetical order and in one line. The alphabetical order makes it easier for me to find properties and the one-line approach lets me ctrl+D in Notepad++ (that duplicates the current line or selection), as well as tweak groups of selectors more quickly than it would take to scroll up and down looking for the ul li.selected that is related to the ul I'm working on at the given moment.

It's nice to be able to just press up and down when I need to change related properties. Thanks to the physical proximity of similar rules granted by alphabetizing rules, with just one keystroke up or down, my cursor will be somewhat where I need it. Here's a pattern I use often that illustrates that.

/*rounded corner styling pattern*/
.t {background-position:100% 0; someotherstuff...}
.t div{background-position:0 0; someotherstuff...}
.b {background-position:100% 100%; someotherstuff...}
.b div {background-position:0 0; someotherstuff...}

Here, I'd type the first line, ctrl+D a few times, tweak the selectors, then the background-position values. Follow the imaginary cursor :)

For maintenance, we can almost look at the blocks of code in the stylesheet as if they were tables: backgrounds here, borders there, etc.

No comments:

Post a Comment