Style-sheet ordering

When awarding the latest version of the Mozilla site a WSA Silver Star, Johan pointed to the mozilla.org Markup Reference.

There is some interesting reading in there, but of more interest to me was the suggested ordering of CSS rules in the following snippet from Mozilla’s content CSS file.

• display
• list-style
• position
• float
• clear
• width
• height
• margin
• padding
• border
• background
• color
• font
• text-decoration
• text-align
• vertical-align
• white-space
• other text
• content

In my experience, setting such conventions makes style-sheets easier to scan, easier to re-edit yourself and easier for others in a team who are working on the same project. My conventions differ slightly from those of the Mozilla team, but follow more-or-less a similar pattern.

This got me thinking more about style-sheet conventions and the best ways of ordering my style-sheets and selectors to make them more logical and easier to follow. Here are a couple of examples.

Selector grouping

Should I,

A. Group styles together according to their mark-up. For example, all <hx>s together, all <p>s together and all <ul>s together?

h2 { rules }
#content-sub h2 { rules }
#content-supp h2  { rules }
etc.

Or, B group styles according to where the fall in the mark-up?

div#content-sub { rules }
#content-sub h2 { rules }
#content-sub p  { rules }
#content-sub ul  { rules }
etc.

I must confess to fluctuating between the two.

Code indenting

Does indenting CSS selectors make a difference to legibility and ease of use? I have seen plenty of left aligned style-sheets but comparitively few which indent selectors according to their relationship with others. For example,

div#content-sub { rules }
     #content-sub p { rules }
          #content-sub em{ rules }

#content-sub ul  { rules }
     #content-sub li  { rules }
          #content-sub li a { rules }
etc.

Again, I’m currently sitting on the fence on this one.

Top-to-bottom or left-to-right?

Finally the old top-to-bottom, or left-to-right question. Personally I find that,

div#content-sub {
float : right;
width : 30%;
etc.
}

far easier to follow than,

div#content-sub { float : right; width : 30%; etc. }

What conventions do you adopt, and do you see any benefit in being so ’nit-picky’ about the ordering and layout of your CSS files?

Replies

1. #1 On September 28, 2004 12:08 AM Jeff Werner said:

   Selector Grouping:
   Both A and B. Two groups for layout and typography, then by order in the markup (head, main, foot) for the former and by tag (hx, p, ul) for the latter.

   Code Indenting:
   Never thought of that. Good idea, will try it.

   Top-to-bottom or left-to-right?
   Definitely top-to-bottom for readability and esp. commenting. But after reading articles about optimizing final output, (ex. here and here) I would like a program or CMS that would convert a master file from one to the other on output.

2. #2 On September 28, 2004 12:18 AM david gouch said:

   Being nit-picky when writing your stylesheet can save a bunch of time when you go back to edit.

   I’ve tried both the grouping methods, and I prefer my stylesheet to follow the same order as the HTML markup.

   But either way, scanning a stylesheet is hard! I want to look down to left edge and see:
   h1 {…}
   h2 {…}
   p {…}

   But it’s never that simple because of IDs. So we get:

   #content-sub h1
   #content-sub h2
   #content-sub ul h3

   Which, when scanning, looks like:

   #content-sub …
   #content-sub …
   #content-sub …

   I just wish I could set the current ID and have the rest of the selectors assume that same path.

3. #3 On September 28, 2004 12:18 AM Neil said:

   Hmm…

   Selector grouping:
   ’A’ seems more intuitive to me.

   Code indenting?:
   NO! it is really fooking ugly.

   Top-to-bottom or left-to-right?:
   Top-to-bottom every time.

   I’ve started to use seperate css files for differing functions.
   Like ’navigation.css’ or ’layout.css’ and then importing them all through a linked stylesheet.

   I dunno if it’s better,faster, or more orginized but it gives me a warm glow.

   Which is important I feel.

4. #4 On September 28, 2004 12:38 AM jordan gillman said:

   I also tend to split layout and display into different css files. But bearing that in mind.

   Selector grouping - i tend to head towards A

   Top to bottom if i know others will need the file, but if it is just for my use, i can handle left to right.

   Never thought about indenting, but at first glance, not particularly a fan.

5. #5 On September 28, 2004 12:43 AM Brandon Walsh said:

   When grouping styles, I tend to put all of the basic styles (stuff that isn’t specific to a class or an ID) at the top, and then I group the rest based on the markup. I’m trying out putting the color information in a separate stylesheet, and sometimes I separate other stuff into its own sheet.

   I definitely prefer top-to-bottom, but I’m considering optimizing my stylesheets.

6. #6 On September 28, 2004 01:45 AM Neil said:

   hey Brandon, I saw this today via nick Bradburys blog:

   https://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/the-definitive-css-gzip-method/

   Little off topic, but seems an excellent way of getting the old bandwidth down a bit. I’m going to give it a spin.

7. #7 On September 28, 2004 01:54 AM Cameron Adams said:

   We discussed this a bit over at the Web Standards Group:

   https://www.mail-archive.com/[email protected]/msg08007.html

   I still maintain that selectors shouldn’t be ordered according to HTML markup because CSS is meant to be independent of the data and vice versa. So when you change the ordering of the data you shouldn’t have to change the order of the CSS -- double maintenance.

   If you do order your CSS according to markup order, where do you put items that occur in different areas of the page?

8. #8 On September 28, 2004 02:44 AM Jonathan Snook said:

   Grouping:
   I break it down into 2 to 3 sections. First are tag only styles. Y’know, turning off margins on the body, forms, setting up anchor styles. After that, I start grouping stuff based on what they do. If I got a bunch of stuff styling my sidebar, I put it all together. I start with the container tag and work my way in.

   Code indenting:
   I indent my rules 4 spaces so that the selectors stand out more.

   Top-to-bottom:
   Actually, for me, it depends. I used to do everything left-to-right because it made it easier to see my selectors since that’s what I really cared about. But as I use more and more CSS, it makes it easier to read top-to-bottom. So, I combine the two. If it’s only a couple rules (eg: body { margin:0; padding:0}) then I’ll keep it all on the same line. Otherwise, I’ll go top-to-bottom but still group certain rules on the same line. So position, left and top will usually go on the same line, font attributes on another, margin and padding on another… you get the idea.

   My 2c.

9. #9 On September 28, 2004 08:01 AM Jan Korbel said:

   Grouping: B
   Indentig: Yes (how you guys could not :)

   Additional: I am building sort of "css module library" for myself, i.e. sepparated CSS file just for forms, as there is usually more declarations; the same for tables and I am thinking about one for menu. Reason: reusable, clear, easy to manage

10. #10 On September 28, 2004 08:57 AM James said:

    I always (where possible) try and group styles together according to their mark-up, making it far easier to edit at a later date, as you’re not trying to scrabble around several pages of CSS trying to find one selector. Having said that, a lot of the pages I work with have different stylesheets based on the content, for example the basket process has its own basket stylesheet, so that that area of the site could if need be have overiding styles.

    Top to bottom is much easier than left to right, and code indenting is something I try and adhere to as well.

    Thank god for commenting is all I can say!!! ;-)

11. #11 On September 28, 2004 08:59 AM Oliver Schwarz said:

    After downloading Wordpress, I encountered another method to order stylesheets: Dave Shea and Matthew Mullenweg ordered the elements and their definitions alphabetically.

    It seemed a little bit weird at first, but every now and then I already start off with an alphabetical order in my stylesheets, too.

    I learned, that it can save some time during development.

12. #12 On September 28, 2004 09:38 AM Phunky said:

    i tend to group mine dependant on what it is ie: All #IDs in one group all .Classes in another and all standards tags on there own up the top.

    I also have a preset structure to all my XHTML and CSS so its kinda just drilled into me!

    as for how i layout my styles i do the double down way :S

    #phunky {
    display : inline ; float : right ;
    width : 500px ; height : 500px;
    }

    Just a old habit i cant get rid off :S

13. #13 On September 28, 2004 10:03 AM Christian Machmeier said:

    Selector grouping:
    - Type selectors are all uppercase.
    - Class and ID selectors are all lowercase or use studlyCaps, where appropriate.
    - Selectors are ordered by their appearance within the HTML source. Or: First by tag name (sorted alphabetically) and then grouped be their appearance within containers (header, content, footer, etc.).
    - The selector properties are ordered by their appearance in the box model, from the inside to the outside. I think that’s logical and works pretty well for me.

    Code indenting:
    No, not until now. The selector properties are always intended.

    Top-to-bottom or left-to-right?:
    Top-to-bottom every time.
    Left-to-right, where appropriate.

14. #14 On September 28, 2004 10:35 AM Mike Stenhouse said:

    I organise my stylesheets into blocks of B, surrounding each block of rules with outdented comments so I can scan the sheet without having to trawl through the CSS. Oh, with plenty of indenting… It may be ugly but I like it!

    Something I’ve started doing, especially for contracting where others are likely to need to read my code, is over-specifying rules. Rather than div.promobox I’ll give it some family history so that anyone coming to amend my CSS later can see not just what it does but where it’s used: div#content div#subnav div.promobox.

    I also ALWAYS put the tag type on every rule where possible… When someone else comes to read my CSS and then piece it together with the HTML they know where to start looking.

    Actually, while I’m about it, I tend to use ids for structural elements and classes for components within each part of the page. Again, it helps when trying to pick up what’s going on and what’s doing what.

    Take all that, break it down into a few separate files: typography, layout, forms, colour; and I’m good to go.

15. #15 On September 28, 2004 12:45 PM Richard@Home said:

    I order my styles based on the following guidelines:

    First the tags
    html {}
    body {}
    h1 {}

    then the id’s
    #id1 {}
    #id2 {}

    then base classes
    .example2 {}

    then any classes that augment previous tags/id’s/classes
    h1.front_page {}

    I also use separate files for my layout, presentation and additional one-off CSS files for special pages.

    This means I can skin a site without effecting the layout and cut out unused styles from pages that don’t need them.

    I blogged an article a while back to do with modularising your CSS: https://richardathome.no-ip.com/index.php?article_id=327

16. #16 On September 28, 2004 01:40 PM Phil Baines said:

    "I still maintain that selectors shouldn’t be ordered according to HTML markup because CSS is meant to be independent of the data and vice versa. So when you change the ordering of the data you shouldn’t have to change the order of the CSS -- double maintenance."

    I agree with Cameron on this one. I think that the order of your classes is best organised into element types, and not the order that element are used on the page.

    I wrote about this once : https://www.wubbleyew.com/blog/showblog.asp?blogID=251

17. #17 On September 28, 2004 02:16 PM Jay Jones said:

    Keith,

    I still am far from settling on the perfect stylesheet, but on the last several sites I’ve built, I’ve noticed some conventions popping up.

    SELECTOR GROUPING:
    Basically, I use both of the options you gave. First, I begin my stylesheet with what I call ’normalizing styles’. These styles set all my margins, paddings, etc. so the basic tags will all be displayed the same across browsers.

    Then, for later grouping, I generally place individual selectors in their proper section. ie: content UL’s styles go under the #content tag, etc.

    CODE INDENTING:
    Yes, I’m an indentor… I have found this to be the easiest to scan and read. It’s easier to scan down the CSS file and pick out major sections, then find the relevant tag under it.

    Top-to-bottom or left-to-right?
    I am a big fan or readability in my stylesheets… for one because others may have to edit them later, and secondly because *I* have to edit them later!
    For this reason, I am a TOP-TO-BOTTOM coder.

    I’m glad you brought this topic up… I’m hoping folks will chime in with some more great ideas.

18. #18 On September 28, 2004 04:22 PM Jeremy said:

    I tend to group by value, then selector, with a single value per instance of selector. Classes are ordered alphabetically by the 2nd letter.
    Indentation, spacing, and line breaks are general-
    ly
    random.

    I also like to repeat values 2 or three times, and generally don’t trust inheritance, so explicitly set all values as many times as possible.
    I also like using @import randomly to import a selector or two.

    I also bill by the hour for maintenance :)

19. #19 On September 28, 2004 04:59 PM patrick h. lauke said:

    without sounding too trite, it’s whatever works best for you (the developer). it’s about personal preference, ways in which you create a mental model of your styles and code.

    for those shouting about "separation of content and presentation" and how having the css follow the flow of the document, all i have to say is: if i ever changed the xhtml, i wouldn’t have to go and change the css…so the order in which the style rules appear in the css is independent of the markup. hence, it comes down to personal preference, as i said. imho anyway.

20. #20 On September 28, 2004 06:54 PM Robert Wellock said:

    Typically stacked top-to-bottom and the ordering of the block; depends on what I feel like normally.

    html {
    selector : property;
    selector : property;
    }

21. #21 On September 29, 2004 05:27 PM Andy Budd said:

    I personally don’t think there is much point worrying what order you put your declarations. Usually a CSS rule set will only contain a small number of declarations so it’s easy enough to see what’s going on.

    If you always putting them in the same order out of habit, that’s good. However if you’re trying to enforce an order on other team members I think it’ll just end up slowing things down.

22. #22 On September 29, 2004 06:05 PM Manzell B said:

    I always start with the body tag. Then I go with the main divisions of the page…

    #header
    { blah ]
    #menu
    { blah }
    #content
    { blah }

    After that, I put selectors in under their respective categories. I also use selector ’full names’, to be as precise (or as less precise) as I mean to be. e.g. - #menu ul li, #menu ul li a:hover

23. #23 On October 1, 2004 04:47 PM William Doyle said:

    Personallly, I like top to bottom there is no question. And recently, I began indenting. it actually made it a lot easier to find stuff every now and then, so it has been added to my personal preferences.

24. #24 On October 1, 2004 10:54 PM Manzell B said:

    Another queston:

    How many people use multiple stylesheets for one medium?

    I’ve begun putting my browser hacks into a dedicated stylesheet… some projects [https://otb.reaxion.org] I’ve worked on have separate stylesheets for each different section (header, footer, etc).

    Generally, I find my stylesheets grow organically and can get very disorganized. In my mind, breaking down the stylesheets into component parts is necessary to be efficient when editing rules.

25. #25 On October 5, 2004 02:29 PM Neil Salmond said:

    www.msmosquito.com/headlice.html
    www.headlice.org/faq/notnit.htm

    images.google.com/images?
    hl=en&lr=&ie=UTF-8&client=firefox-a&q=head+lice&btnG=Search

26. #26 On October 9, 2004 01:24 AM Root said:

    I always do put all the layout stuff first. Generally the rest goes alphabetically if it is for widespread use. If its a theme I am starting to isolate the color and bgs in one group. I mix and match. Where you are right on the money is that this is a subject worth thinking about and where an ounce of planning saves grief later. I am thinking in terms now of CSS file size. I should remove the white space really but I am dreading it. Your blog is looking very gorgous Malarkey.
    When are you upgrading to WordPress or TXP ? :)