I want to name a CSS class and call it imgSuper. Can I use camel-casing in CSS classes?
+10
A:
Yes, but beware that while CSS syntax is case-insensitive, it does not specify how browsers should handle case when matching CSS rules to HTML class names. Browsers are known to vary on this issue.
From the spec, section 4.1.3:
All CSS syntax is case-insensitive within the ASCII range...
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
...the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification.
Warren Young
2009-10-10 13:42:11
-1. That's misleading. CSS is case-insensetive, but class names are case-sensetive.
Guffa
2009-10-10 14:04:50
Not according to the spec: "...the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification." It might be that all current browsers are case-sensitive in this respect, but you can't count on it.
Warren Young
2009-10-10 14:07:45
As I wrote in my answer, you can't count on the case-sensitivity of class names as some browsers gets this wrong, but your selective quoting of the spec makes it sound like you can count on them being case-insensetive, which is totally wrong.
Guffa
2009-10-10 14:16:20
Edited. Can I have my point back now? :)
Warren Young
2009-10-10 14:19:23
It's still just as misleading. Class names are _not_ case-insensetive.
Guffa
2009-10-10 15:10:27
Edited again. Happy now?
Warren Young
2009-10-10 15:24:16
Class names are case insensitive in IE, but not in Firefox, it appears.
erikkallen
2009-10-10 15:39:32
@Warren: Why can't you quote the spec correctly, instead of chopping it up and rearranging it?
Guffa
2009-10-10 17:32:09
@erikkallen: Class names are only case-insensetive in quirks mode in IE, not in standards compliant mode.
Guffa
2009-10-10 17:32:41
A:
Yes you can. Just be sure that if you call a class "fooBar" in your css file that you use consistent caps when assigning class="fooBar" in your markup.
ozona
2009-10-10 13:51:29
A:
Yes, class names are case sensetive, so that works fine.
However, you should be aware that some browsers get this wrong, and doesn't treat class names as case sensetive. Therefore you should avoid using both the upper case and lower case variations of the same name. The classes imgSuper and imgsuper may be treated as the same by some browsers.
Guffa
2009-10-10 14:03:51