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

Question

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.

Answer 1

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

Do try to follow a good style-guide though, like this one.

Answer 2

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.

Answer 3

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.

Answer 4

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/

Answer 5

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.

Answer 6

Twitter uses Pascal Case even.