TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

CSS Styling

May 01, 2003

When using CSS, the one thing that almost no thought is given to is how to format the file itself.

Most CSS examples use the verbose format, with each attribute on its own line. Like so:

p {
    text-align: left;
    font: 12px/16px verdana, sans-serif;
    color: #333;

This seems to have caught on as a standard method, and while it looks nice, it’s horrendously unusable for larger style sheets. A couple of columns of text on each line fill up only the first portion of the editor and leave the rest of the window empty. Scrolling to find any given element takes far too long, and wastes too much time. There’s a better way to use that space.

I’ve started using a more compact format recently that works wonders. Depending on the size of your site, almost your full CSS definition fits on one screen, and a quick glance is all it takes to find the element you’re looking for. The above example would look like so:

p { text-align: left; font: 12px/16px verdana, sans-serif; etc. }

Not much different on the first glance, but compare these two files — verbose and compact — and you’ll see how the space savings start to add up with larger CSS definitions.

A bit onerous at first glance, I suppose, but it doesn’t take scrolling through seven screens to find the element you need to edit. It even saves a trivial few dozen bytes of line breaks and spaces, if you’re into that kinda thing.

Just a recommendation to make your life easier. You’re welcome.

Reader Comments

haze says:
May 01, 08h

the verbose format tends to be a stronger selling point for ppl who write their own code because javascript has a similar format. as well, unless the CSS is viewed by an application that colour-codes everything, you’re left with one big line of code that wont necessarily be easily understood 2-3 months down the line. (always expect the client to want the coders to make changes)

the verbose format along with smart comments and an organized method of writing the CSS tags will leave you in a position where you wont need to worry about coming back and scrolling thru the CSS file.

let’s just face it, we can write an entire html page on one single line, but we dont do it because we’ve found methods to give the code structure and order. same goes for a good file-naming convention, folder tree, and even CSS tags.

Stv. says:
May 02, 01h

I like the ‘verbose’ method for the reason of scanning. I can spin my mousewheel and scan down line by line really easily. However, if there’s more than one thing on a line, I actually have to read the line, long CSS files or not. It’s a little like reading SQL queries, which I tend to do a lot of. While I could easily write it on one line, I’d much rather elongate my page and split it out one item per line. When rapidly scanning pages later on, it’s much faster to find what I’m looking for.
Finally, I also (and this may be a bad thing in and of itself) tend to split my CSS files up. I have ‘tag definition file’, wherein I put default styles for existing tags. I then have (if neccessary - sometimes this is merged in with the tag def file) a ‘typography’ file, wherein styles affecting copy & images are defined, and finally, a layout file, wherein I define, well, layout-related styles.

Dave S. says:
May 04, 10h

Addressing scanning: notice in the compact mode how easy it is to scan for #buttons, for example. Then scan for #linkorama in the verbose. This is the way I work - I care far more about quick access to the individual elements than I do about the attributes to each. I have no problems scanning a line for the padding, for example.

If it’s a personal preference issue, there’ll be no consensus here. Either you like it or you don’t. I find it far more usable to do something about the ridiculous amounts of white space in the right of the window when I’m editing. You may be perfectly happy not to.

May 05, 04h

A more practical concern – shorthand declarations can trigger bugs in some browsers. Go figure…

Alannie says:
May 06, 09h

I definitely see the benefits in using the compact format for larger CSS files. When I’m developing a site, however, I find the verbose format much easier to manage. Quicker to triple-click to select an entire line containing a single rule and copy or move to the beginning of another line, than to precisely align the cursor where the highlighting needs to start/end, then again precisely click where you want it to go. Also the verbose format helps me quickly compare rules for two selectors, for troubleshooting and coding efficiency. After the CSS’s developed, though, I see the benefits of converting it to compact for quicker overall scanning later on. Both modes work for me at different points in the development cycle.

Dave S. says:
May 06, 09h

George - true enough. Haze pointed out to me recently that padding: 0px 0px 0px 0px; does bad things on Mac IE. But shorthand and the compact mode are two separate ideas.

Alannie - I think you’ve hit on it. It’s easier for me to work with the verbose mode during development; all the white space is a luxury and I don’t mind scrolling as much since each element is fresh in my mind. But maintaining it afterwards is a huge pain, which is where I find the compact mode shines.

If you’ve ever had to redesign from an existing CSS file — I mean an extensive, no-holds-barred all-out redesign and not just shuffling a few elements around — you’ll probably be with me on this.

Peter G says:
May 09, 01h

I have tried both methods discussed here. I usa the verbose style in Bradsoft’s Top Style Pro. The Selectors window allows me to ‘jump’ to whichever selector I need to work on. However, on a large project, I prefer to break up the styles into a number of sheets labelled according to their function (eg Page, Divs, Links, Text & Images).

I cannot stress enough the importance of commenting the code, particularly if certain broweser workarounds are employed or a certain approach is used where another would have been just as good. A commented note will save hours of head scratching later. Good practices in programming should apply here to design … don’t leave the comments to the end, do them as you go and they will actually mean something, and they might actually help you later!

Congratulations on the CSS Zen Garden by the way, I found the link from Eric Meyer’s site and I was as impressed as he was!

allen says:
May 12, 10h

I personal use a version of the compact method – but waste horizontal space. To make for greater readability, I tab a few times before I open the bracket. Seems more readable, to me, with it all lined up …