NB: This page is archived without styles. Go to our home page or read my blog.

The weakest link

I've been trying to better optimise my CSS recently, and this has lead me to wonder where certain rules are best arranged.

Not a Simple Quiz!

I don't want to tread on Dan's or his Simple Quiz toes, but...

I've been trying recently to better optimise my CSS, and this has lead me to wonder where certain rules are best arranged. So with that, and with this example of a navigation list in mind.

Which of the following do you prefer and why?

Navigation list

A. Applying font stying to a list
ul#nav {
list-style-type : none;
font-size : 90%; /* Font styling */
font-weight : bold;
text-decoration : none;
text-transform : uppercase;
}

ul#nav li {
display : inline;
}

ul#nav li a {
float : left;
}
B. Applying font stying to list items
ul#nav {
list-style-type : none;
}

ul#nav li {
display : inline;
font styling
}

ul#nav li a {
float : left;
}
C. Applying font stying to anchors
ul#nav {
list-style-type : none;
}

ul#nav li {
display : inline;
}

ul#nav li a {
float : left;
font styling
}

How high up a heirachy of elements do you choose to go?

Replies

  1. #1 On October 29, 2004 04:57 PM LintHuman said:

    Well, it would probably depend on the context, but as a general principle I'd go for A. That would allow me to apply styles specific to the list items and links as and when required; a menu with a pre-selected item, for instance.

    Ask me tomorrow and I'll have changed my mind...

  2. #2 On October 29, 2004 05:45 PM Ben Lumpkin said:

    I prefer to use A. I've found the more global you can get, in most cases, the less lines of code you end up with at the end.

    But sometimes I need to use C. to offset my global link color/font.

  3. #3 On October 29, 2004 05:55 PM Malarkey said:

    Now that's interesting...

    I tend to favour C because I think that the font styling should relate to the links themselves, rather than the fact that they are in a list. Ummm...

  4. #4 On October 29, 2004 07:01 PM Jonathan Snook said:

    I tend to globalize my font styling options (option A in this case) and then override any styles, as necessary, for sub-elements. I apply text-decoration specifically to links since it's designed specifically to override the default behaviour.

    So, if I decided to add a paragraph of info into one of the subnav items, I wouldn't have to duplicate the font styling information for the P element, since it'd already be applied to the UL. (well, to be honest, that probably wouldn't happen with the example you gave but you get the idea, I hope)

    So this is what I'd have:
    ul#nav {
    list-style-type : none;
    font-size : 90%;
    font-weight : bold;
    text-transform : uppercase;
    }

    ul#nav li {
    display : inline;
    }

    ul#nav li a {
    float : left;
    text-decoration : none;
    }

  5. #5 On October 29, 2004 07:04 PM Carlos Porto said:

    I would have to also agree with C.

  6. #6 On October 29, 2004 07:15 PM Jeff Adams said:

    I would have to go with A. I like to keep my CSS as general as possible.

  7. #7 On October 29, 2004 08:02 PM Jules said:

    I tend to use A to apply "global" styling as Ben stated above and then if li or a required different treatments, then they only receive the differences from ul. If you applied the treatment to a (as in C) and then needed to add some text to li after the fact and the li text was outside the a, then you either need to shift the style in the a selector to the li selector or create a duplicate.

    Work top down is how I do it: broad strokes, then refine for narrower and narrower selectors.

  8. #8 On October 29, 2004 08:17 PM Neil Whiteley said:

    I would have to go with C in this scenario as the ul is being used in a structural context rather than for any specific styling purpose and so I would style the anchor.
    Moreover, I would drop the first selector completely, displaying the list items in-line will dispose of the bullet points anyway, even though they are still visible in Dreamweaver or similar.
    I would also dispense with the ul prefix and reference the element ID directly and in my final published version structure selectors on single lines and remove any unnecessary white space and the final semi-colon (every little saving helps) ending up with:
    #nav li {display:inline}
    #nav li a {float:left;font styling}

  9. #9 On October 29, 2004 08:47 PM Malarkey said:

    @ Neil Whitely:

    I agree with most of what you said here although (reference a previous column), I sometimes add the first selector (ul#nav) as it clearly shows others in the team that the #nav relates to a list and not a <div>.

    I've seen your liking for removing white space, but I still prefer to leave my CSS rules on multiple lines. It's easier for me to read, especially when coming back to a site a while later, but I have been known to 'one line' rules when I need to squeeze every ounce of file size.

  10. #10 On October 30, 2004 01:40 AM Neil Whiteley said:

    I agree, within working versions of files I would also structure for legibility, both within (X)HTML and CSS. However, I do tend to maintain two versions, one working and one published. The latter being stripped for file size.

  11. #11 On October 30, 2004 07:52 AM Lachlan Hardy said:

    I'll take B, thank you, Andy!

    My reasons are similar to those of folks choosing A. Specifically, it saves repeating a bunch of rules for the list item indicating the current page (which I never anchor) - the only property-value pair I need to put in that rule is usually the colour

    So why A instead of B? All my list contents are in list items... so why would I need the rule to apply to the UL itself? I'm sure I'm missing something here, so if one of the folks who answered A wants to explain why, that'd be grand

    On the other hand, if the UL was wrapped in a #nav div for whatever reason, I'd probably put the font styles there - for the same reason as those who chose A

  12. #12 On November 2, 2004 05:25 AM Francesco said:

    I would lean toward C, for the greater specificity it offers.

  13. #13 On November 2, 2004 06:11 AM scottbp said:

    I'm with Francesco, specificity being very important.
    It does depend upon my site of course but if I have defined my links elsewhere I would want to have that specificity to make sure the listed links had the correct styles.

  14. #14 On November 2, 2004 04:40 PM ray said:

    I would go with A...
    As a navigation list, I would expect that the formatting would tend to be consistent throughout the list anyway....in the case of any exceptions, I would create another rule.

  15. #15 On November 16, 2004 01:06 PM Ed Merritt said:

    I would have to say example C.

    My thinking behind this is that on larger sites (with inevitably longer stylesheets) conflicting styles become harder to track down.
    By keeping styles as specific as possible, it is likely to save you time in the future when something behaves in an unexpected way.

    Also, it's always easy to apply the style to another element if you need to (separating them with cammas etc). which also seems likely to be less code than writing extra styles to overcome the initial, generic one.