CSS 101: Group by layout

Posted on August 26, 2007. 22 comments.

Many developers group their CSS stylesheet rules by element, with every text element in one segment of the CSS file, then headings, then lists and so forth.

However, since you almost always look for rules that applies to a special part of your page when editing your CSS, grouping your rules by layout is a much better idea.

For instance, at the top of your CSS file, put general rules for body, p, ul and such. Then, group the rest of your rules by layout element, like #header, #sidebar, #footer and so forth.

h1,h2,h3,
h4,h5,h6  { font-family: Helvetica, Arial, sans-serif; } 
a         { font-weight: bold; text-decoration: none; }
body      { margin:18px 0; }

/* -------------------------------------- */

#header         { position: relative; margin-bottom:5px; }
#header #links  { border-bottom:1px solid #ddd; }
#header h1      { font:bold 5em Helvetica, Arial, sans-serif; }
#header ul      { list-style-type:none; margin: 0 0 35px 0; }

/* -------------------------------------- */

#promo            { border-top:2px solid #ddd; }
#promo .column    { border-color:#ccc; }
#promo .column p  { padding:10px; margin:0; }

I think you’ll find that this makes for much more enjoyable CSS development.

Note: Blueprint 0.5 will hopefully be released tomorrow.

Tags: css
22 comments
  • beeblebrox says:

    Ah.. I so often start following these guidelines. Then after a while I need some super-special rules for some section so I just throw them in together with something slightly similar. But it usually turns out it wasn’t so super-special a section anyway, plus I find the need for many other super-special sections too, and in the end the stylesheet is so messed up I end up putting every new rule at the bottom of the stylesheet in hopes of finding it faster just while I’m still developing, and suddenly it’s deadline and as long as it works…

    A great reminder of good guidelines, and I am really looking forward to applying them together with Blueprint 0.5 :)

  • Guillaume says:

    woohoo! I’ve so been waiting for the forms. Can’t wait to be tomorrow.

  • Evdawg says:

    Looking forward to 0.5. Keep up the great work!

  • Dimox says:

    Yes, Olav, I do also.

  • TucknDar says:

    Yes, tomorrow is now today :) Looking forward to 0.5

    Blueprint has helped me finally make sense of CSS. It’s such an excellent package!

    Tusen takk, Olav.

    • Christian
  • Lisa Risager says:

    Hi Olav, yes, grouping by layout makes for very sensible and simple style sheets, and are much easier to handle (and lighter) than separate style sheets for colour, layout etc.

    Can’t wait for 0.5!

  • Volker says:

    Grouping is great, only it should be used from the beginning, otherwise you often end up getting strange output. and that just because order of rule declarations does matter :-(

  • Marc Edwards says:

    I agree. It’s the way to go.

    This is even less of an issue if you’re using CSSEdit though, as you can have a full folder hierarchy for grouping your CSS. Makes editing larger CSS files a snap.

  • Matt says:

    hey, if i could say it better in my own words, i would.

    Did you ever know that you’re my hero, And everything I would like to be? I can fly higher than an eagle, For you are the wind beneath my wings.

    It might have appeared to go unnoticed, But Ive got it all here in my heart. I want you to know I know the truth, of course I know it. I would be nothing without you.

    -http://www.bettemidler.com/

    rock out friends. bp is teh dope. (thanks!)

  • Anonymous Legion says:

    ^^ creepy

  • elv says:

    I also organize my CSS files like this. Plus I add the name of the section in the comment :

    /* header */

    And write them in the page order. So it’s easier to get to a specific section with the find command if the CSS file becomes very long.

  • Matt Wilcox says:

    I’ve never found grouping by layout to work well. I’ve found grouping by selector helps to promote separation of presentation from structure - what happens when you re-design or the mark-up changes? Suddenly that logical grouping by layout isn’t logical any more. Grouping by selector also makes for more compact CSS - because it’s far more likely that you want to apply the same styles to the same elements - so it makes sense to group them in one rule-set. That’s more compact than re-declaring the same styles for the same elements but in a different section (thus requiring the entire rule-set to be duplicated rather than simply chaining selectors).

    As long as your system is consistent and makes sense to you then it will work fine - but the idea that ‘one organising system is intrinsically better’, which is what you’re claiming up there, is simply wrong.

  • Daniel Skinner says:

    I’m a fan of group by layout. Whenever you need to change a style you almost always have all the CSS you might need to change right in front of you.

    I like to take things one step further and have sepearate files such as:

    layout.css styles.css navigation.css print.css

    This makes it really easy for anyone to find the right file they need to edit at a glance.

    As for having multiple CSS files affecting page performance (not a good trade of for the sake of CSS organisation) I like to use a nice PHP script called Combine.

    For a quick intro to how Combine works see: http://www.destiny-denied.co.uk/news/?article=site-performance-1

    For a full usage description and download see: http://rakaz.nl/extra/code/combine

    Give Combine a chance and you will never go back! Combine easily lets you organise CSS and JavaScript however you like without affecting page load times.

  • Aukcje says:

    Brilliant idea. Thanks for very interesting article. btw. I really enjoyed reading all of your articles. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. Greetings

  • Mike says:

    very good site

  • porov99 says:

    This is a very neat trick to group the css. It might never happen but it would have been much beter if css provided a syntax that could group the rules like namspaces in c++.

  • Opel says:

    That looks really great :)

  • Forum Opel says:

    I organize my CSS files like this.

  • dıs cephe says:

    very good site

  • hekimboard says:

    thanks friends..

  • dzwonki says:

    Thank you! Very interesting and helpful article.

    Good Article!

  • jos says:

    What a nice tip, i have never even grouped my css rules, this can really save me some time.

Add your comment

(anti-spam measure)

 (optional)

 (optional)

You can use Markdown for formatting (preview here) and Gravatar for avatars.