You’re just getting started with HTML/CSS and you found yourself wondering if there’s a naming convention for the ids and classes of the DOM elements in your documents.
Before we dive deep into it, let me give you the long story short:
In HTML, there is no standard naming convention that you should follow for the ids and classes of elements. However, there are some best practices you can adopt to make your code easy to read and maintain.
These best practices are all about writing your CSS code in an orderly and consistent manner so that, when you or someone else on your team need to add to it, refactor it, or debug it, you can do so easily—because you understand what’s what.
The three most widely used naming conventions when it comes to the ids and classes of HTML elements are:
- Kebab Case: Lowercase with hyphens
- Snake Case: Lowercase with underscores
- Camel Case: Initial word upper-case
Kebab Case: Lowercase With Hyphens
This is how I, along with most of the web developers I know, name the ids and classes of elements in my HTML documents:
- If the id or class consists of a single word (or abbreviation), write it with all lowercase letters
- If the id or class consists of two or more words, write it with all lowercase letters, separating pairs of adjacent words with a hyphen
Let’s take a look at one example:
<!-- Single-word id or class -->
<body id="home"></body>
<!-- Multi-word id or class -->
<body id="home-page"></body>Whether you use one hyphen, two hyphens, or more, is entirely up to you.
For example, you can use two hyphens to indicate a parent/child relationship within the naming of your HTML elements:
<figure class="post-thumbnail">
<img src="/img/my-image.webp" />
<caption class="post-thumbnail--caption">Caption goes here</caption>
</figure>Snake Case: Lowercase With Underscores
Some people who write HTML code prefer to separate pairs of adjacent words with an underscore rather than a hyphen.
If we adapt the same example we used above for this naming convention, we end up with the following HTML markup:
<figure class="post_thumbnail">
<img src="/img/my-image.webp" />
<caption class="post_thumbnail__caption">Caption goes here</caption>
</figure>Once again, you can use one underscore, two underscores, or as many underscores as you like to indicate hierarchical relationships and nesting of HTML elements.
The use of underscores, although less common, is encouraged by the BEM (Block, Element, Modifier) naming convention for HTML elements.
Camel Case: Initial Word Upper-Case
JavaScript developers will wonder if they can also use camel case—the most common style for naming JavaScript variables and functions—in their Cascading Style Sheets.
Technically, you can use camel case in the ids and classes of your HTML elements. However, this leads to a number of edge cases and limitations when using complex CSS selectors that query for elements containing certain words.
To show you what camelcase ids and classes would look like, let’s adapt the example we used in the previous two sections again:
<figure class="postThumbnail">
<img src="/img/my-image.webp" />
<caption class="postThumbnailCaption">Caption goes here</caption>
</figure>So what exactly are the limitations of using camel case in the ids and classes of your HTML elements?
Well, you won’t be able to make full use of a number of CSS attribute selectors because they are case sensitive. If you try to query for DOM elements containing “thumbnail,” for example, your selectors won’t match those containing “Thumbnail.”
Of course, you could get around the problem by combining two CSS selectors—one for the capitalized version of the word and one for the lowercase version—but then your naming convention is a limitation you’ll have to work around by writing additional CSS code.
Which One Should You Choose?
As we already discussed, there’s no right or wrong answer here. You can do lowercase, with dashes and/or underscores, or camelcase—whichever you and the rest of your team prefer.
When in doubt, go for all lowercase with hyphens; this is the coding style and naming convention followed by all members of the HTML working group and used in the specification for the HTML standard.
The most important thing is to select a naming convention that you and your team members can agree on, then stick to it religiously. This ensures that everyone writes their HTML markup in the same way, with consistently-named ids and classes.
The second most important thing, as the Google style guide for creating HTML and CSS code points out, is to use names that reflect the purpose of the DOM element in question. Those names can be specific or generic, as long as they are descriptive.
“Lowercase With Hypens” is called ”kebab-case”.
Lower case with underscores is called “snake_case”