Can I use camelCase in CSS class names

Question

I want to name a CSS class and call it imgSuper. Can I use camelCasing in CSS classes?

Answer 1

Technically yes, but it's risky because while CSS syntax is mostly case-insensitive, in some browsers under certain conditions, class names are treated as case-sensitive, as the spec does not specify how browsers should handle case when matching CSS rules to HTML class names.

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.

Rather than learn the browsers and conditions where case is sensitive, it's best that you just realize that the best approach is the most compatible: use the same case in all code for a given CSS class, and don't create two or more CSS class names that differ only in case.

Answer 2

Sure. Here are the official rules; basically you shouldn't start the name with a number, and you can use letters, numbers, hyphen, underscore, and escaped or encoded characters.

However, as a matter of convention, hyphens are generally used instead of camel case.