35

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.

James P.
  • 19,313
  • 27
  • 97
  • 155
  • 6
    There's no technical reasons, no. Use whatever is standard in your project (or *make* a standard if one doesn't currently exist). – Matt Jul 10 '12 at 10:40

6 Answers6

39

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.

James P.
  • 19,313
  • 27
  • 97
  • 155
srigi
  • 1,682
  • 1
  • 15
  • 30
  • 19
    Yeeaaaahhhh. I hope to never use this nor encounter this rule in a project. – steve Nov 21 '13 at 20:37
  • You can achieve exactly the same effect with `[class^="search-"]` I am for hyphens though, consistency rules. – YemSalat Jun 27 '14 at 15:51
  • 3
    No you can not. `[class|="search"]` will match both "search" and "search-whatever", your solution does not. – inta May 06 '15 at 15:43
  • 2
    More on the `|=` (pipe equals) [at MDN here](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax). – ruffin Feb 25 '21 at 14:50
28

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

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

Simon D
  • 4,150
  • 5
  • 39
  • 47
Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
  • I looked for this because I'm considering adopting using eElementID for html elements that are used for scripting and oElementID within the script for the object within the script to make the HTML and the coding more readable. Up until this consideration I've always used strictly lowercase for CSS IDs and classes. – Wayne Aug 02 '15 at 10:13
  • This style guide actually has many good points. (And my offtopic goes) except [this part](https://google.github.io/styleguide/htmlcssguide.html#Indentation): why should we ever deprecate tabs in favor of spaces for indentation? I find this recommendation inconsistent. – vintprox Apr 18 '19 at 07:22
  • 1
    @vintproykt it is widely accepted that we shouldn't mix spaces and tabs. Aside from that, this is a somewhat religious war in the world of software development and there is no clear answer which is "better". I mostly indent with two spaces. If I use tabs in the Haskell code that I write, the compiler complains. On the other hand, when you write a Makefile you _must_ indent with tabs. Remember also that Googlers don't know everything, and this guide is just that — a guide; not hard rules for life. – Jezen Thomas Apr 18 '19 at 12:49
  • @JezenThomas yes, format/extension matters as always :) I'm OK with spaces, for example, in JSON files, it's not intense to edit some entries in it. Other concerns are dependant on the team. – vintprox Apr 18 '19 at 13:02
11

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.

Kutalia
  • 519
  • 8
  • 10
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/

Dave Haigh
  • 4,369
  • 5
  • 34
  • 56
  • Some other implementations of scripting are using the first letter for identification. I've discovered this becomes very readable to the point of changing styles over to camelCase with the first letter being an identifier. But needed to check for technical problems with older browsers; Its a IE habit. – Wayne Aug 02 '15 at 10:19
3

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.

Community
  • 1
  • 1
Nik
  • 2,718
  • 23
  • 34
1

Twitter uses Pascal Case even.

Twitter PascalCase CSS class names

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404