Comments on: Format Your CSS

By: Josh Walsh

Josh Walsh — Fri, 02 May 2008 15:56:40 +0000

I tend to code in the “Traditional” way as well. As you said, it’s definitely not ideal, but works well for me.

Your tabbed approach is interesting to me, but since I don’t do a whole lot of styling by individual ID’s , rather mostly by more generic class based styles, I think it would be distracting for me.

I’m going to try using one-line selectors for simpler definitions and keeping to “Traditional” definitions for larger, more structural definitions.

By: Andreas Lagerkvist

Andreas Lagerkvist — Mon, 07 Apr 2008 11:55:20 +0000

I’ve used the same type of indentation since I read about it on Dustin Diaz’s site a few years back. I agree that it really helps get a better overview of your code.

In addition to indentation I always structure my CSS modular. Each module on the site gets its own div with a unique ID (#recent-comments for example) and that module also gets a CSS-file (recent-comments.css) where every selector starts with the module-ID (so as not to style anything generic from a module-file).

I’ve also implemented my own CSS-constant-parser. It’s quite different from what I’ve seen before and I’m currently using it on a very large website where it’s definitely helped keep my HTML as tidy and clutter-free as possible.

Honestly don’t see the point in SASS. It looks like you need to learn another language all over again for very little benefit and what about portability?
Ok, to be fair, using my constant-parser has the same drawbacks though.

By: Steve

Steve — Fri, 25 Jan 2008 03:06:53 +0000

oops.. didn’t pick up on my whitespace. hahaha, sorry about that.

By: Steve

Steve — Fri, 25 Jan 2008 03:06:07 +0000

I personally can use either a one-line declaration or multi-line declarations that are tabbed in once. however, I have started writing my style rules in alphabetical order, which actually has saved me a lot of time when going through my stylesheet and doing some edits. I prefer this style though.

#wrapper { background:#FFF; color:#000; font:100%/150% "Trebuchet MS", Verdana, sans-serif; margin:0 auto; width:90% }

By: Andy

Andy — Mon, 17 Dec 2007 18:05:10 +0000

That’s really interesting, I initially started using one line styles because thats just how I thought it was supposed to be done, when I realised I was ok to use whitespace, I switched to an almost identical style to yourself.

I had never considered indenting styles to match the code layout. I might give that a go on my next project (although I don’t think I’ll be using one line styles, because I find them a nightmare to read!).

By: Robert Lidberg

Robert Lidberg — Tue, 11 Dec 2007 11:11:39 +0000

We have been using this CSS “layout” for years, always worked like a charm :) In larger projects too.

If we ever work with someone not used to this format, you can always get the usual format using firebug.

Best regards,

By: Armen

Armen — Mon, 10 Dec 2007 04:46:55 +0000

Nice one! I might drop the traditional method, and become a new follower of this alternative method. It looks nice, and I think I could edit faster if I adopted it. Thanks!

By: Fatih HayrioÃ„Å¸lu’nun not defteri

Fatih HayrioÃ„Å¸lu’nun not defteri — Wed, 05 Dec 2007 13:50:42 +0000

[…] CSS yazarken denenebilecek yeni bir format. BaÃ„Å¸lantÃ„Â± […]

By: Brad Dielman

Brad Dielman — Tue, 04 Dec 2007 16:46:58 +0000

Great post, Dan. I still write my CSS in the “traditional” manner, although I may try your new style of mimicking the layout of the HTML document.

As you pointed out, I can see how it would help when trying to determine inheritance.

By: Seth

Seth — Tue, 04 Dec 2007 15:13:19 +0000

I tend to use something a little different:

#my_id { style } #my_id p { style } #my_id p.class { style } #my_id p a { style }

This makes finding the code really easy and because it’s done without any additional formatting I can code faster. This may not be a concern for everyone, but I am very limited to the actual amount of coding time alloted.