51

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

1
  • 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, 2013 at 6:06

6 Answers 6

72
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}

Good luck! There is no maximum length it says.

1
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-]*
1
  • 3
    That explains why I had trouble using a hash as a classname. (SHA, MD5 often start with a number) Thanks.
    – Greg
    Jul 29, 2013 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

3
  • 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 3, 2010 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, 2013 at 9: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, 2014 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/

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.

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.