In Defense of Horizontal CSS
Over the past couple of months, I’ve read a number of articles about formatting CSS. To my surprise, there’s actually a large debate about horizontal VS vertical formatting. Vertical formatting, like I’m used to, looks like this:
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
font-style: normal;
}
Horizontal formatting rewrites that same rule as:
abbr, acronym {border-bottom: 1px dotted #666; cursor: help; font-style: normal;}
At first glance, individual properties are much easier to parse vertically; and this is true when it comes to small style sheets.
Huge Style Sheet
Some people separate their CSS into separate sheets: one for structure, one for fonts, etc. I got in the habit of using tab-styling/comments in my CSS and prefer not to make it modular; this works great for the average CSS. With large sites that have a large number of styles however, it starts to get a bit ridiculous. I’m a neurotic adjuster and constantly access and change my CSS throughout the development of a site. And, while I like to think I’m well-organized/structured, I also have the habit of throwing random styles in random places and forgetting about proper tabbing until it’s too late. Leaves me with a mess of a CSS that needs lots of time to work with, and too much maintenance.
I’ve been working on a database entry system that’s going to be used by a lot of different students, so static appearance and usability are incredibly important. My CSS was approaching 1000 lines and I just couldn’t deal with it anymore, so I tried converting it to a horizontal format. It was one of those shave-off-all-your-hair moments (“why did you close the program Matthew! You can’t even Undo anymore! We’re all doomed!”) But then I looked at the length: ~150 lines.
Alphabetization
That first day I started working with the horizontal sheet was the day I stopped doing things vertically. The amount of time I’m able to save by quickly scanning is incredible. While I thought declarations would be difficult to parse, they’ve actually given me a good reason to keep them alphabetical — and this makes ALL the difference.
We usually see alphabetization in list form, but it’s surprisingly easy when it’s in-line, too. Just choose a random place in the string and scan left and right; there’s the property you were looking for. Another benefit of alphabetization is portability: anyone taking over from you will have an easier time understanding your work.
Think of it like putting your alarm clock on the other side of your bedroom. You know logically you should get up when it goes off (alphabetize), but sometimes it’s just not going to work out if you’re close enough to hit snooze (vertical CSS).
Hooray for Horizontal
I’m about to start work on renovating the first major website I ever made with CSS. I kid you not, it’s ~2000 lines long and is probably responsible for the deaths of a million helpless children. You can bet that the first thing I’m doing is a reformat.
Comments
Post a comment