HTML ID and CLASS naming best practices

Question

Hello and thank you for taking your time to read my question. My question pertains to html best practices.

I have a html skeleton that looks like this..

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Template</title>
        <meta charset="utf-8">
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

and I want to start adding HTML elements that I will later select these elements by ID and CLASS within CSS and JavaScript. My "Best Practice" related questions are..

Do ID and CLASS have identical naming conventions?
What is the minimum and maximum recommended ID and CLASS attribute length?
Why do websites like facebook name there ID and CLASS atributes with random numbers and letters?
Should I use camelcase?
Should I use underscores or numbers?
Should I shorten words with abbreviates like "Detail" becomes "Det" when naming?
Should I give ever elements that is a child of body a ID and CLASS atribute?
Would I ever need to specify an ID or CLASS attribute for a element within the HEAD element?

Useful https://stackoverflow.com/questions/6028211/what-is-the-standard-naming-convention-for-html-css-ids-and-classes — Priyesh Kumar, Jun 25 '17 at 16:00

score 7 · Accepted Answer · answered Jun 26 '17 at 14:35

Some of these answers are down to personal preference:

Do ID and CLASS have identical naming conventions?

The naming conventions are up to you.

What is the minimum and maximum recommended ID and CLASS attribute length?

There are, as far as I know, no such recommendations.

Why do websites like facebook name there ID and CLASS atributes with random numbers and letters?

To avoid accidental duplication and for tracking purposes.

Should I use camelCase?

It's one good option.

Should I use underscores or numbers?

These are more good options.

My own system (I don't know anyone else who uses it) is the following:

HTML - <div class="my-string"> [hyphens]
CSS - .my-string [hyphens]
Javascript - var myString = ''; [camelCase]
PHP - $My_String = ''; [underscores]

By using different syntax for variables and classes, I avoid mixing up different types of data.

Should I shorten words with abbreviates like "Detail" becomes "Det" when naming?

You can but personally I wouldn't. But it's up to you.

Should I give ever elements that is a child of body a ID and CLASS atribute?

Not sure I understand this question.

Would I ever need to specify an ID or CLASS attribute for a element within the HEAD element?

No. There is no need for this.

HTML ID and CLASS naming best practices

1 Answers1