开发者

Is there a maximum length for the class name in CSS?

开发者 https://www.devze.com 2022-12-18 19:06 出处:网络
Is there a maximum number of caracters for t开发者_JAVA百科he name of a class in CSS ? .thereisnomaximumlengthforaclassnameincss {

Is there a maximum number of caracters for t开发者_JAVA百科he name of a class in CSS ?


.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}

Good luck! There is no maximum length it says.


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-]*


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


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/


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.


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

精彩评论

暂无评论...
验证码 换一张
取 消