CODEWITHSUNDEEP
csscase-sensitivecamelcasing
KJai
KJai

Reputation: 1705

Can I use camelCase in CSS class names

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

Upvotes: 48

Views: 41554

Answers (4)

Guffa
Guffa

Reputation: 700372

Yes, class names are case sensitive, so that works fine.

However, you should be aware that some browsers get this wrong, and don't treat class names as case sensitive. Therefore you should avoid using both the upper and lower case variations of the same name. The classes imgSuper and imgsuper may be treated as the same by some browsers.

Upvotes: 7

Warren Young
Warren Young

Reputation: 42343

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.

Upvotes: 51

ozona
ozona

Reputation: 446

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.

Upvotes: 0

Jacob Mattison
Jacob Mattison

Reputation: 51052

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.

Upvotes: 11

Related Questions