HTML class naming conventions, and id naming conventions

In HTML, classes should be lower-case with dashes:

<div class="class-name-1 another-class-name"> </div>

There are exceptions:

<div class="BookChapter" ></div>

However, ids should be camelCase or PascalCase (capitalized first letter):

<div id="thisDiv"></div><div id="anotherArray"></div>

The reason for this is, id can be a variable name: $thisDiv, $anotherArray. However, classes don't quite correlate to objects (because there can be more than one class in a document - as opposed to a single instance of a variable).

The exception, in my opinion, is that a react class, which is in PascalCase, can correspond to an element. In this case, there are many instantiations of a class, and many instances of this div (with this class name):

<div class="BookChapter" ></div>

const BookChapter = (props) => {
  return <div className="BookChapter">{ "render the book chapter somehow" }</div>
}

I hope this answers people's questions on whether id's should have dashes, and whether classes should be capitalized.

.^.

Please login or register to post a comment.