Simple markup, organised CSS

In Lean XHTML and Precise CSS, Mike Rundle talks about his way of laying out and structuring CSS files and the advantages he believes his coding style has. He also talks a bit about separating design from content and the advantages of doing so.

Nothing revolutionary here, but I always find reading about other people’s coding style interesting. There’s always something new to learn or a coding detail to be picked up and incorporated into your own style. Indenting CSS rules, for example, is something I’ve started doing after reading about it in a couple of articles.

Posted on December 12, 2005 in (X)HTML, CSS, Quicklinks


  1. Roger,

    It is interesting reading other’s code. It’s educational, too.

    Especially, your line

    There‚Äôs always something new…

    which continues the discussion “A web professional can never stop learning”.

    I’t seems most “Web Professionals” will continue learning. To that end, I’ve noticed the tenor of most “Old Professionals” has softened in their posts.

    The single line from Mike Rundle’s article,

    …I’ll go ahead and recommend it to newer CSS coders because it’s very simple to implement…

    [My emphasis.]

    Illustrates that “The New Amatuers” are being given encouragement elsewhere from 456 Berea Street. Very encouraging.

    My 2pf.

  2. Quite interesting that, especially to newer CSS coders who may be writing their CSS with a little bit of randomness. Personally I go for the “by layout position” myself and then build each declaration in a set order (eg) float, margin, padding, border, background, color etc. I find it helps build a pattern that I can recognise and zero in to quickly.

    One other thing I do that is different to everyone it seems is to not use one line per declaration. I hate scrolling so I bunch it all up onto as few a lines as possible. It also trims a few bytes off the filesize too - when I modified my blog’s CSS file to my style I shaved 2k (20%) off the original. I dunno, bit anal that perhaps :p

  3. December 12, 2005 by Roger Johansson (Author comment)

    Sean: Yep, you should learn something new every day.

    Karl: I’ve tried that style too, but it’s too compact for my tastes. If it works for you, it works. Just make sure to discuss it with any other people that may need to open and edit the same CSS files.

  4. For the majority of my stylesheet, I tend to list my selectors in the order they appear in my HTML.

    Here is what I don’t understand though:

    The page the article is on does not validate for starters (not that it is a big issue but, that’s a different story), for numerous reasons; (1) not replacing amphersand’s with their corresponding HTML entity, (2) repeated identifiers, (3) identifers starting with a digit, not to mention (4) useless name attributes, where an identifier is perfectly sufficient and (5) numerous errors w.r.t. well-formedness. But who cares right? go XHTML!

    Easy fixes.. yet, releasing an article about how they group/tab code?!

    I’ll take an article like that seriously, if/when the authors take their code seriously.

    (operators, feel free to mod me down)

  5. I think my markup is simple and pretty efficient, but not everyone seems to agree with me. A matter of preference, I guess.

    Usually I organize css by ‘layout-importance’ so that layout is defined in one stylesheet and ‘layout-independent’ elements are defined in another. That way I can keep an overall look across several layout-variations, by @media importing several common stylesheets from the main one for each layout-variation.

    Grouping styles for elements that tend to depend on each other close together, is another of my methods that seems to ease debugging and maintenance.

    Lastly: I most often do as Karl, and write ‘wrapping one-liners’ that give me a lot of styles on screen and less need for scrolling. Works for me, and others don’t seem to have any problems with it either - once they know I wrote it.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.