Tony the Pony
Tony the Pony

Reputation: 41347

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

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?

Upvotes: 28

Views: 37869

Answers (3)

user229044
user229044

Reputation: 239250

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.

Upvotes: 21

zubinmehta
zubinmehta

Reputation: 4533

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/

Upvotes: 6

joemccann
joemccann

Reputation: 401

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.

Upvotes: 0

Related Questions