Is there a maximum length for the class name in CSS?
CssCss Problem Overview
Is there a maximum number of caracters for the name of a class in CSS ?
Css Solutions
Solution 1 - Css
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}
Good luck! There is no maximum length it says.
Solution 2 - Css
No maxiumum.
Basically, a name may start with an underscore (_), a dash (-), or a letter(a–z), and then be immediately followed by a letter, or underscore, and THEN have any number of dashes, underscores, letters, or numbers:
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Solution 3 - Css
Don't forget about bandwidth. It may not seem to make a difference but one css file with 30 classes with long names can add up to a big performance issue on a large site
Solution 4 - Css
W3C Schema for CSS 2.1 -
Also, I used their CSS validator with a really long class name... it passed validation -
Solution 5 - Css
To add to what others have written, would just like to add if - like me - you find you sometimes end up with crazy long names (because you like being descriptive) then it's worth bearing in mind selectors, which also promotes style re-use and helps keep things easy to read.
e.g.
h1 {
1.5em;
}
styledParagraph {
font-size: 1em;
}
/* Override the default font size if the styledParagraph element is inside an element with the class articlePage */
.articlePage .styledParagraph {
font-size: 1.5em;
}
/* Make all <h1> elements in .articlePage -> . styledParagraph larger than the default */
.articlePage .styledParagraph h1 {
font-size: 2em;
}
This is very widely supported (even in MSIE 6) and it's much easier to read than a class name like .articlePageStyleParagraphHeading.
Solution 6 - Css
Similar to this question on ID names in HTML as well. Seems like there is no "practical" limit.
I say keep them as short as possible, while still being descriptive - why even flirt with crazy-long names? :)