CSS: Is there a limit on how many classes an HTML element can have?

Question

CSS allows an HTML element to have multiple classes:

<div class="cat persian happy big"> Nibbles </div>

But is there a limit on how many classes are allowed per item?

• Damien_The_Unbeliever: In general, with any limit question, if you have to ask, you're doing something wrong. Unless this is just idle curiosity :-)
• Tony the Pony: I am storing an element's state in the class attribute, so I can deal with the display purely via CSS -- there are up to 32 possible state flags.
• user229044: Unless your flags are exceptionally long, you should be fine. Remember that your classes cannot be numeric; they must start with a letter. 32 is invalid while f32 is valid.
• user229044: possible duplicate of Maximum limit of CSS classes that can be assigned to HTML element ?
• user334911: It isn't true that if you have to ask you are doing something wrong. If you have to ask, you are doing something unusual. But sometimes that is the right thing to do. In fact, sometimes it is the critical insight. Though doing something unusual requires knowing more about what you are doing to make sure you don't blow things up. And doing that requires things like asking this question. :)

Answer 1

You're only limited by the maximum length of an (X)HTML attribute's value, something covered well by this answer.

Browsers are often very forgiving of standards violations, so individual browsers may allow much longer class attributes. Additionally you are likely able to add a practically infinite number of classes to a DOM element via JavaScript, limited by the amount of memory available to the browser.

For all intents and purposes, there is no limit. I'm assuming you're asking out of curiosity; it goes without saying that if you're seriously worried about hitting this limit, you've done something very wrong.

Answer 2

No. I don't think, I have ever come across any such limit/

EDIT: Sorry for the casual remark.
According to the specifications, there isn't any limit but someone has tried to reach this limit and it seems the limit for Opera, Safari supported well over 4000 classes, and Firefox at least 2000 classes!
Source: http://kilianvalkhof.com/2008/css-xhtml/maximum-number-of-supported-classes-per-element/

• user229044: Has me curious. I don't fully agree with his testing methods; He is adding classes in exponential numbers for some strange reason, which destroys the accuracy of his test - the longer it runs the more inaccurate the results. I've written a different test which shows FF will accept well over 10,000 classes.

Answer 3

There is no technical limit (barring the amount of memory the browser may be consuming), but one should heavily consider having loads of classes on any element as the browser will have to parse all the classes, apply those styles and render the page.

Also, if you need to search the DOM for elements of a particular class and elements contain loads of classes, you may likely see a performance issue if the JavaScript interpreter has to parse loads of classes.