meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Competent Classing

At last week’s Web Design Meetup, a couple of people showed me their current projects.  As is my wont, I glanced over the visual design and then started digging into the document markup.  In the course of the resulting conversation, I pointed out some ways to tighten up the markup.  I’ll repeat them here for those who are curious.  All of them relate to using classes and IDs efficiently.

The first recommendation I had was to use classes and IDs in conjunction.  Not everyone is aware that an element can carry both a class and an ID.  Well, they can.  So it’s no problem to have markup like this:

<div id="utilities" class="menu">

That way, you can style all menus consistently via the menu class, while having the utilities ID there for any ‘Utilities’-specific styling you need to do.  This has always been possible, and it’s supported by multiple browsers.  You don’t see it often, I admit, but then it’s not often needed.

The second recommendation was to use space-separated words in your class values.  This is thoroughly legitimate, and can make things a lot more compact.  So you might have something like:

<td class="subtotal negative">(-$422.72)</td>

You can then have one rule that styles all subtotals, and another than styles any negative number.  For example:

.subtotal {font-weight: bold;}
.negative {color: red;}

By using these kinds of class values, you can avoid having to construct one class for subtotal, and another for subtotal-negative.  If you’re doing that sort of thing, I can tell you right now that your CSS is larger and more complicated than it needs to be.  Multiple-word class names also free you from having to do things like throw in extra spans or other elements just to add more information, like so:

<td class="subtotal"><span class="negative">(-$422.72)</span></td>

That kind of structure is almost never needed, except in extremely rare cases where you must have an inline element on which you hang some presentational styles that can’t be applied to the table cell.  I can’t even think of a concrete example right now, but I’m sure there is one.  In which case, I’d say do this instead:

<td class="subtotal negative"><span>(-$422.72)</span></td>

But, as I say, the odds of your having to do that are very very low.

All this leads to a third recommendation that came to mind as I looked over the markup.  Remember to use document structure to your advantage, and not to class everything in sight.  I can’t tell you how many times I’ve seen this kind of markup:

<div class="navlinks">
<a href="blah01" class="navlink">Blah01</a> |
<a href="blah02" class="navlink">Blah02</a> |
<a href="blah03" class="navlink">Blah03</a> |
<a href="blah04" class="navlink">Blah04</a> |
<a href="blah05" class="navlink">Blah05</a>
</div>

Out of the six classes that appear in that markup fragment, five are completely useless and simply bloat the page weight.  Here’s a much more efficient way to structure the markup:

<div class="navlinks">
<a href="blah01">Blah01</a> |
<a href="blah02">Blah02</a> |
<a href="blah03">Blah03</a> |
<a href="blah04">Blah04</a> |
<a href="blah05">Blah05</a>
</div>

Now all you do to style the links is write a rule that uses the selector div.navlinks a instead of one that uses a.navlink.  In addition to making the HTML weight smaller, it also makes the document cleaner and a whole lot easier to read.  Your users don’t really care about that, of course, but I bet you will, if you ever have to go in and adjust either the markup or the content.

So there you go.  Hopefully it was of some help to you.

45 Responses»

    • #1
    • Pingback
    • Mon 19 Jul 2004
    • 0802
    Received from Outwardly Normal 2

    [...]

    Competent Classing  [Thoughts From Eric]
    CSS is even more flexible tha [...]

    • #2
    • Pingback
    • Mon 19 Jul 2004
    • 1418
    Received from Dive The Web » Navigation et tuiles

    [...] ec l’usage de Tiles. Toujours est-il que l’article d’Eric Meyer sur les meilleurs méthodes pour utiliser des classes en CSS tombe à poin [...]

    • #3
    • Pingback
    • Mon 19 Jul 2004
    • 2056
    Received from brettgough.com » Competent Classing | An Online Portfolio | Website Design | Website Development | Web Firm | Website | System

    [...] ur redundant css code to allow for a much lighter more robust layout. Check it out here: Comments (0) –> Comments RSS feed fo [...]

    • #4
    • Pingback
    • Tue 20 Jul 2004
    • 1702
    Received from at the 404 ! » Back to Basics

    [...] use we have adopted an easier or sloppier way of doing it. WordPress blogger and CSS guru Eric Meyer has just stepped up with a timely reminder on the proper emplo [...]

    • #5
    • Comment
    • Sun 18 Jul 2004
    • 2258
    Adam Rice wrote in to say...

    Multiple classing is a good idea in theory, but I’ve found that it can be hard to keep track of which classes are contributing what styling in which context. This is something that one might be able to refactor in a second-round revision, although it’s still difficult to keep straight in your head, especially when you need to re-use one of those classes in a new context. Any tips on the mental juggling required?

    • #6
    • Comment
    • Sun 18 Jul 2004
    • 2331
    Josh King wrote in to say...

    Adam,

    A tool such as the DOM Inspector that comes with the Mozilla family of browsers in an indepensible tool for sorting through things like cascading and figuring out which styles get applied in which order. Try it out sometime. There’s a ton more you can do with it.

    • #7
    • Comment
    • Mon 19 Jul 2004
    • 0141
    Tommy Olsson wrote in to say...

    I’m using both of those techniques, because it makes life so much easier. By using “good” class names and ID’s, you can even make things almost self-documenting. (By “good” I mean names that specify what an element is, rather than what it looks like.)
    Mozilla’s DOM Inspector is extremely useful, although it crashes a bit too frequently for my taste. I find it invaluable when I’m looking for cascade- or specificity-related CSS problems, because it shows me exactly which CSS rules that are applied to an element.

    • #8
    • Comment
    • Mon 19 Jul 2004
    • 0324
    zimba wrote in to say...

    Don’t forget that you can use ID’s only once in the page. If you have a huge layout with different blocks it can happen to have collisions ;)
    What would be usefull is an elements map of the website, ordered by pages. (with XML it must be possible no ?)

    • #9
    • Comment
    • Mon 19 Jul 2004
    • 0758
    James wrote in to say...

    While I now remember that I’ve read about space-separated words in class values, I’d completely forgotten that you could sue them.

    Thanks to this reminder, I’ve just been able to remove a whole host of span tags from a table of data that I’ve been working on at work. (Sorry can’t post it here it’s “for internal eyes only”).

    Thank you yet again Mr Meyer for the always useful information!

    • #10
    • Comment
    • Mon 19 Jul 2004
    • 0801
    James wrote in to say...

    *use (please excuse my typo)

    • #11
    • Comment
    • Mon 19 Jul 2004
    • 0940
    dspn wrote in to say...

    Good stuff. I’ve been using selectors rather than classing a whole stack of link elements individually, but the idea of multiple class names is news to me, and a very welcome idea.

    • #12
    • Comment
    • Mon 19 Jul 2004
    • 1013
    kartooner wrote in to say...

    Some great advice there. It’s always good to learn how to streamline CSS code and get rid of any divititus. Thanks for sharing your thoughts, it really put things into perspective.

    • #13
    • Comment
    • Mon 19 Jul 2004
    • 1349
    Blake Scarbrough wrote in to say...

    I think this is the next step in getting people to really understand how to optimize their CSS.

    Is there a limit to the number of classes you can use, I have only ever used 3 on one element, but wondering if it is limitless?

    • #14
    • Comment
    • Mon 19 Jul 2004
    • 1352
    Seth Thomas Rasmussen wrote in to say...

    I would assume the number of classes is unlimited, in theory. I’ve never heard anything about a limit.

    • #15
    • Comment
    • Mon 19 Jul 2004
    • 1446
    Dinah Sanders wrote in to say...

    Very helpful. Thank you as ever, Eric, for your time devoting to teaching.

    • #16
    • Comment
    • Mon 19 Jul 2004
    • 1545
    patrick h. lauke wrote in to say...

    good common sense advice, nicely worded as always.

    • #17
    • Comment
    • Mon 19 Jul 2004
    • 1635
    Tantek wrote in to say...

    Excellent write up.

    A good rule of thumb to help remember how and why to avoid classes that are:

    useless and simply bloating the page weight

    is Context before class.

    Another good rule of thumb (which I need to add to a pending update to “A Touch of Class“) is “Class for meaning, not for show“. I’ve seen far too many class attributes recently like class='black', class='grey', class='clear', etc. (from folks who should know better), with respective rules like .black { color:#000; } , .grey { color: #999; }, .clear { clear:both; }, etc. Such presentational class names are not much (if at all) better than presentational attributes like color='black', color='grey', clear='all' etc. It may require a bit more analysis, but it is always better to think of class names that represent the meaning/function of the specific element(s) rather than what happens to be their current presentation. That way when their presentation changes (as it inevitably does), or alternative presentations are designed for additional media types or devices, you avoid such confusing style rules like .black { color:navy; } etc.

    • #18
    • Comment
    • Mon 19 Jul 2004
    • 2253
    Mike D. wrote in to say...

    Might I also point out that using multiple classes is of tremendous value if you use the brilliant float-clearing routine at positioniseverything.net to clear your floats. Whenever I have a container div I need cleared, I just give it a class of “twocolumn clearthis” or “threecolumn clearthis” etc etc etc. That way it picks up the style rules from the first word and the clearing behavior from the second word.

    • #19
    • Comment
    • Tue 20 Jul 2004
    • 0613
    Chris Hunt wrote in to say...

    Good article, though for completenes you might want to include Tantek’s point about naming classes (and ids) for their function rather than appearance.

    I do think one area might be explained with more clarity, though. You talk about “multiple-word class names”, when you actually mean “multiple-word class attributes“. A class name can’t include spaces, a class attribute can contain multiple space-seperated values. Of course you know that, but it might not be clear to the novice given the way it’s worded.

    • #20
    • Comment
    • Tue 20 Jul 2004
    • 0859
    J.E.F. Manansala wrote in to say...

    Ok, you lost me. I will have to read this again. This is [very] interesting. Keep up the good work! ;)

    • #21
    • Comment
    • Tue 20 Jul 2004
    • 1035
    Simon Collison wrote in to say...

    Oh, Eric. I just got through two intensive weeks of rebuilding the structure of the blog, and along come these nuggets! The idea of unlimited classes attached to one element is very intreaguing. Still, I finally got rid of the class=”menulist” attached to every sidebar link, by doing something similar to one of the points above. Getting leaner and cleaner…

    You sure you ain’t got time to do another book for that publisher you were talking about? How many more of these gems are you storing up?

    • #22
    • Comment
    • Wed 21 Jul 2004
    • 1008
    Dean Oberg wrote in to say...

    Good article. We also have been trying to minimize our CSS by reusing classes like content. We place it in a div at the beginning of a section, and define how it should behave if it encounters href’s, li’s or p’s rather than making separate link, list or pargraph classes.

    .content {color:#000}
    .content a {color:#06c}
    .content a:hover {color:#bbb}
    .content li {color:#090}
    .content p {color:#b00}

    • #23
    • Comment
    • Mon 2 Aug 2004
    • 1801
    Paul O'Brien wrote in to say...

    Unless i’ve made an error somewhere, there seems to be a bug in ie when using id and class together. The code below should render a blue background in ie but renders it in red instead.
    CSS:
    #outer {background:red;}
    #outer.test {background:green}
    #outer.inner {background:blue}
    HTML:

    This is red in Ie and blue in moz

    If you change class=”inner” to class=”test” then the background is green as expected. This makes it impossible to set up different classes for different templates for example. I know there are other ways of doing this but thought it might be interesting to know.

    • #24
    • Comment
    • Tue 3 Aug 2004
    • 0422
    David House wrote in to say...

    Of course, you also pointed out the fact that the last example there should be an unordered list, right? ;)

    • #25
    • Comment
    • Tue 3 Aug 2004
    • 0848
    david gee wrote in to say...

    I’ve been taking this approach now for a while – both using multiple class names and fully utilizing the “cascade” by wrapping blocks of content in container DIV’s. I find it to be a very efficient way of working, it really speeds up the process, and to me at least, makes my CSS far more readable.

    However, it seems to run against the grain of the whole semantic markup brigade, whose unnatural bias against non-semantic markup tags like DIVs and SPANs puzzles me. Take the following two examples:

    <– Begin Semantic Block –>
    <h1 class=”header”>Header Text</h1>
    <p class=”paragraph”>
    Paragraph text
    </p>
    <ul class=”list”>
    <li><a href=”#”>link</a></li>
    <li><a href=”#”>link</a></li>
    </ul>
    <– End Semantic Block –>

    <– Begin Efficient Block –>
    <div class=”myclass”>
    <h1>Header Text</h1>
    <p>
    Paragraph text
    </p>
    <ul>
    <li><a href=”#”>link</a></li>
    <li><a href=”#”>link</a></li>
    </ul>
    </div>
    <– End Efficient Block –>

    Of course, this is really simplified – assume that both examples would be in the context of a complicated document which would prevent you from directly styling the HTML tags directly. The first example is more semantically “pure”, but involves class bloat – the only case in which you can take advantage of descendants is the unordered list. By wrapping the entire block in a semantically meaningless div, you gain a lot more power to manipulate the contents without adding classes to every element.

    To me, this is the real power of non-semantic tags. Many web authors who’ve picked up a bit of semantic zealotry tend to avoid using non-semantic markup at all, which is kind of silly – in much the same way that attempting to build a tabular grid without using a table is. Of course, we should remember to mark up semantically meaningful content using semantically meaningful tags, but there is nothing wrong with using non-semantic tags to “wrap” your meaningful structure.

    I’d even go so far as to say there’s nothing inherently wrong with wrapping a block of meaningful content in four nested layers of DIVs to achieve a specific visual effect – the non-semantic markup just provides you with the “hooks” you need to get the job done, and should properly be ignored by any media that doesn’t use it.

    The only disadvantage I can think of is that perhaps search-engines would rank a H1 wrapped inside a DIV lower than a root-level H1, but I’m really not even sure if this is true.

    • #26
    • Comment
    • Thu 19 Aug 2004
    • 0624
    KS wrote in to say...

    I’d like to further clarify the point explained in Comment #18. It is actually a “space separated list of classnames”. Even though the term “multiple-word class attributes” is correct it is not clear for the novice what we are talking about, while when we say “multiple classnames” there’s no question about it.

    Also, the example in Comment #23 works with DIV fine. IE notices onlythe first complex selector, in this case #outer.test. If you swap them it will ignore #outer.test and consider #outer.inner. Too bad!

    • #27
    • Comment
    • Fri 25 Nov 2005
    • 1933
    Nell Wagner wrote in to say...

    Dear Eric,

    Can an active anchor be used in a media=print stylesheet?

    In screen mode my links will display the choice image flawlessly but will fail miserably when I want to print. Does the status or focus of the link temporarily change when printing?

    Thank you in advance for your reply.

    Nell

    • #28
    • Pingback
    • Tue 14 Feb 2006
    • 0444
    Received from Creative Suds » Blog Archive » Just Make it Work – Real World Web Standards

    [...] ugh an ID and class. It is also possible to style with multiple cases. More info here: http://www.meyerweb.com/eric/thoughts/2004/07/18/competent-classing/ >> Debu [...]

    • #29
    • Comment
    • Sat 8 Jul 2006
    • 0756
    Milos wrote in to say...

    Hi Eric! Why do you use it like this?

    Blah01 |
    Blah02 |
    Blah03 |
    Blah04 |
    Blah05

    Do you use CSS?

    • #30
    • Comment
    • Sat 8 Jul 2006
    • 0828
    Eric Meyer wrote in to say...

    I’m sorry, Milos, but I don’t understand your question.

    • #31
    • Pingback
    • Fri 25 Aug 2006
    • 1050
    Received from Vitamin Features » Add microformats magic to your site

    [...] Competent Classing, by Eric Meyer [...]

    • #32
    • Pingback
    • Sat 26 Aug 2006
    • 0608
    • #33
    • Comment
    • Tue 27 Mar 2007
    • 0357
    Sven wrote in to say...

    Hi Eric,

    verry good CSS coding. Thanks for the tipp.
    Greeting from Germany
    Sven Fischer

    • #34
    • Comment
    • Thu 10 May 2007
    • 1757
    Randy Vogel wrote in to say...

    Hey now Eric!

    Your example of the presentation of a negative number subtotal,
    (-$422.72)
    seems to overlook the fact that the use of red (via CSS) obviates the need for parentheses and minus sign.
    That is, parentheses are an old-fashioned accountant’s method for indicating a negative quantity (when numbers must be black), while the minus sign is the traditional mathematician’s method for doing the same.

    To repeat the point another way, parens OR the minus sign OR red type all indicate individually that a number is negative. It’s odd to use more than one of these methods simultaneously.

    • #35
    • Comment
    • Thu 30 Aug 2007
    • 0640
    Andy Mabbett wrote in to say...

    The example <td class=”subtotal”><span class=”negative”> is perhaps best substituted by <td class=”vcard”><span class=”fn”> – as used in microformats, which require classes on nested elements.

    • #36
    • Comment
    • Tue 12 Feb 2008
    • 2156
    Evan Prodromou wrote in to say...

    You say, That way, you can style all menus consistently via the menu class, while having the menu ID there for any “Utilities”-specific styling you need to do. I think you mean the utilities ID.

    • #37
    • Comment
    • Tue 12 Feb 2008
    • 2200
    Eric Meyer wrote in to say...

    Exactly so, Evan! I’ve updated the post to fix that very embarrassing error. Thanks for bringing it to my attention.

    Funny that nobody else noticed or mentioned that in the 3.5 years since I wrote the post. Well, that’s why I leave comments open indefinitely!

    • #38
    • Comment
    • Wed 7 May 2008
    • 0634
    David Foster wrote in to say...

    I believe Milos is asking why you use the vertical bar character in your list of links. In fact, when I’d seen that, I wanted to ask the same question.

    I would have done something like this:

    <ul class="navLinks">
    <li><a href="blah01">Blah01</a></li>
    <li><a href="blah02">Blah02</a></li>
    <li><a href="blah03">Blah03</a></li>
    <li><a href="blah04">Blah04</a></li>
    <li class="last"><a href="blah05">Blah05</a></li>
    </ul>

    I’d then apply a border-right to all li tags except the last (accessible by the ‘last’ class)

    • #39
    • Comment
    • Wed 7 May 2008
    • 0750
    Eric Meyer wrote in to say...

    Ah! Thank you, David, for clearing that up.

    Of course, it’s been almost four years now since the original post, so I don’t recall the original project constraints—there may have been some reason that a list wasn’t acceptable in those circumstances. Doing things the list way is certainly a fine way to go; I’ve done it myself many a time. Doing the links as bar-separated text also works, of course, though it doesn’t offer nearly the same level of styling flexibility.

    • #40
    • Comment
    • Wed 20 Aug 2008
    • 0636
    SJ wrote in to say...

    Does multiple class pose any performance issue Vs a single class used to define a Block,

    Vs

    where in four are in single CSS File, so the server request is 1 only.

    .w120{width:120px;}
    .h120{height:120px;}
    .fleft{float:left;}

    .blockA={width:120px;height:120px;float:left;}

    • #41
    • Comment
    • Wed 20 Aug 2008
    • 0640
    SJ wrote in to say...

    for the above post
    /div class”w120 h120 fleft”> Vs <div class”blockA”/

    • #42
    • Pingback
    • Sun 11 Jan 2009
    • 0353
    Received from Add Microformats Magic to your Site | Vitamin

    [...] Competent Classing, by Eric Meyer [...]

    • #43
    • Comment
    • Tue 7 Apr 2009
    • 0616
    Arnaud Meuret wrote in to say...

    Hum, sorry to have to break the mighty 42 number of comments, but I think you should really get rid of the weird phrasings:

    - “space-separated words in your class values” : gramatically correct but VERY misleading
    - “Multiple-word class names” : utterly wrong ! These are multiple class names.

    It really looks like you did not understand the mechanism altogether.

    An element can be assigned multiple classes. Period. No fuzzy magic involved.

    Make no mistake, I find your taking time to share your discoveries very valuable, I am doing by best to do it myself. Keep going.

    • #44
    • Comment
    • Fri 26 Jun 2009
    • 1619
    Danny Hurlburt wrote in to say...

    But don’t you pay a performance penalty with div.navlinks a as opposed to div.navlinks a.navlink?

    With the first selector, anytime the browser comes across an anchor element it has to march up the DOM to see if it is a descendant of a div.navlinks. A document may very likely contain dozens or even hundreds of anchor elements that are not a descendant of a div.navlinks. Each of these anchors incurs a performance penalty even though the selector does not match.

    With the second selector, anytime the browser comes across an anchor element it simply needs to check if it has the class navlink. If it doesn’t, then it can dismiss the CSS selector for this anchor.

    See http://code.google.com/speed/page-speed/docs/rendering.html for details on using efficient CSS selectors.

    • #45
    • Pingback
    • Tue 22 Sep 2009
    • 2134
    Received from OpenOn website

    [...] am again standing on the shoulders of giant’s regarding the markup, and in particular and keen to adopt Malarky’s conventions [...]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


July 2004
SMTWTFS
June August
 123
45678910
11121314151617
18192021222324
25262728293031

Sidestep

Feeds

Extras