CODEWITHSUNDEEP
csscamelcasing
James P.
James P.

Reputation: 19617

Is using camelCase in CSS ids or classes ok or not?

Question is in the title. I'm used to using camelcase in development and, since there are crossovers with design, was wondering if there are any technical reasons (regardless of opinions) against using it in HTML. Thanks in advance for your replies.

Upvotes: 37

Views: 62116

Answers (6)

Jezen Thomas
Jezen Thomas

Reputation: 13800

Technically, no, there are no technical issues. Do what you like.

Do try to follow a good style-guide though, like this one from Google. Its section "Class Name Delimiters" says

Separate words in class names by a hyphen.

And its section "Capitailization" says:

All code [the guide is for HTML/CSS, not JS] has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).

Examples thus include video-id (note that they converted the word "ID" to lowercase).

Upvotes: 28

Dan Dascalescu
Dan Dascalescu

Reputation: 152095

Twitter uses Pascal Case even.

Twitter PascalCase CSS class names

Upvotes: 0

Kutalia
Kutalia

Reputation: 559

I'd been using camelCasing before today, let me tell the story: I created a bootstrap modal by the id name written in camelCasing. I couldn't manipulate it using bootstrap's own JQuery function. After searching for days, finally my co-worker found out that camelCasing was causing it. JavaScript case sensitivity can be tricky and unpredictable. So I suggest you to use hyphens.

Upvotes: 12

srigi
srigi

Reputation: 1732

There is one technical limitation if you use camelCase identifiers in your CSS - the |= selector specifier:

<form class="registration"></form>
<form class="search-movies"></form>
<form class="search-actress"></form>

To match only search forms, you can write:

[class|="search"] { font-size: 150% }

You cannot do this with camelCase class names.

Upvotes: 41

Dave Haigh
Dave Haigh

Reputation: 4547

Good question. I personally use camelCase in class/id names.There is no technical reason why you can't.

However, after doing some quick reading on opinions, it seems alot of other developers/designers use hyphens over camelCase due to better readability.

Go with what you are comfortable coding in. I have got by fine using camelCase, I work in a team environment and never had an issue with readability for other developers.

Opinions on this that I have been reading can be found here: http://css-tricks.com/new-poll-hyphens-or-dashes/

Upvotes: 3

Nik
Nik

Reputation: 2726

It is ok yes, but be aware there are some general technical case sensitive issues to be aware of. From a technical perspective, if you're consistent in your css and html you should be fine.

Upvotes: 4

Related Questions