52

Is there a maximum number of caracters for the name of a class in CSS ?

Rabskatran
  • 2,269
  • 5
  • 27
  • 41
  • 3
    All the answers for this go with the spec, but I'd like to know if there's a *practical* limit, for say IE8. – kibibu Sep 24 '13 at 06:06

6 Answers6

72
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}

Good luck! There is no maximum length it says.

Younes
  • 4,825
  • 4
  • 39
  • 66
40

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-]*
Yada
  • 30,349
  • 24
  • 103
  • 144
  • 3
    That explains why I had trouble using a hash as a classname. (SHA, MD5 often start with a number) Thanks. – Greg Jul 29 '13 at 20:13
10

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

Sruly
  • 10,200
  • 6
  • 34
  • 39
  • 10
    +1, although something tells me that we're not in the 1970s any more, and considering the amount of useless P2P traffic, a few extra UTF8 codepoints in CSS isn't a big deal. – Aiden Bell Feb 03 '10 at 13:38
  • Bandwidth is also important when using web on a mobile device. Not everyone has a fast mobile connection, and a lot of long names in a huge CSS class can make a difference. – Uooo Jul 25 '13 at 09:32
  • 2
    don't forget about classnames in your html. If you have a table with 1000 rows by 20 cells, then any classname length for TD multiplies by 20,000. So the classname "thereisnomaximumlengthforaclassnameincss" will cost you ~800kb. – oluckyman Apr 23 '14 at 10:52
2

W3C Schema for CSS 2.1 -

http://www.w3.org/TR/CSS21/

Also, I used their CSS validator with a really long class name... it passed validation -

http://jigsaw.w3.org/css-validator/

Kris Krause
  • 7,304
  • 2
  • 23
  • 26
2

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.

Iain Collins
  • 6,774
  • 3
  • 43
  • 43
1

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? :)

Community
  • 1
  • 1
chucknelson
  • 2,328
  • 3
  • 24
  • 31