How should class naming be in HTML? — Clean Code.

Many developers can spend a significant amount of time on naming during the development phase. In fact, for some, it can become a situation where more time is spent on naming than on the coding itself. This is because when naming elements such as classes, ids, functions, variables, and files, it is crucial to use descriptive, meaningful, concise, and consistent names that accurately reflect their purpose within the project.

But why should we name things this way?

1. The written code becomes more readable and understandable. Our team members or developers from other teams can easily comprehend code blocks, improving collaboration and maintenance processes.
2. Proper naming ensures consistency in our projects, making naming processes easier as the project grows.
3. Our CSS files become more organized. Managing and finding a meaningfully named class is always more comfortable.
4. It prevents naming conflicts when using external libraries.
5. It benefits SEO (search engine optimization) and accessibility.
6. It adheres to the DRY (don’t repeat yourself) principle, preventing code repetition.
7. In large projects, new areas, features, and design revisions are constantly added. Proper naming facilitates better adaptation to these changes, ensuring smooth progress in code updates.

In software development, there is a crucial concept known as Clean Code, emphasizing code readability, understandability, sustainability, and organization. Proper naming is a significant part of Clean Code, and adherence to Clean Code principles begins with accurate naming.

So, how should we name classes in HTML that allow us to build the framework of our websites?

• Class names should be written in lowercase letters and separated by either a hyphen (-) or an underscore (_).

<div class=”header-block”></div>
<div class="header_block"></div>

<!-- In cases where they are not separated by a hyphen (-), 
they are defined as two separate class names.-->

<div class="header block"></div>

<!-- These three divs are entirely distinct from each other. -->

• Apart from English, other languages should not be used, and camelCase naming conventions should be avoided. CamelCase is a naming convention where the first letter of a word is lowercase, and the initial letters of subsequent words are uppercase.

<div class=”başlık-alanı”></div>
<div class="headerBlock"></div> 
<div class="başlıkAlanı"></div>

<!-- Absolutely should not be used like these examples. -->

<!-- The correct usage is as follows: -->

<div class="header-block"></div>

• CamelCase naming conventions are used when assigning IDs to HTML elements that require them.

<div id=”sendButton”></div>

• It should be specific and descriptive, clearly defining the purpose of the area to which it is applied.

<article class=”article-content”></article>
<nav class="menu-block"></nav>
<div class="post-date"></div>

• It should be kept short and concise, avoiding excessively long naming conventions.

<div class=”authentication-block-container-area”></div>
<div class="frequently-asked-questions-area"></div>

<!-- It is more appropriate to use as follows:  -->

<div class="authentication-block"></div>
<div class="auth-block"></div>
<div class="faq-area"></div>

• Avoid naming conventions that are so short that developers outside of your context would find it challenging to understand.

<div class=”lg-cn”></div>
<div class="ar-co"></div>

<!-- Can be used in the following forms: -->

<div class="login-content"></div>
<div class="article-content"></div>

• Generic names that could be used in many places should not be used on their own.

<div class=”blue”></div>
<div class="right"></div>
<div class="back"></div>

<!-- It is more appropriate to use in the following manner:-->

<div class="blue-btn"></div>
<div class="content-right"></div>
<div class="back-item"></div>

So, what is the foundation of these recommendations? Why should we name our elements in this way?

1. In some browsers or platforms, there may be differences in case sensitivity. Therefore, consistently using lowercase letters for class names will prevent potential, unforeseen issues.
2. We do not use Turkish names in naming because the language of software is universal and is English. Using a language other than English can create problems related to character differences based on language and case sensitivity, similar to the issues mentioned before.
3. CamelCase is a widely accepted naming convention, preferred not only in class names but also in IDs, variables, and function names.
4. Long naming conventions, especially when used with CSS in large projects, will increase file size, negatively impacting performance. Additionally, long names make the code less understandable and slow down the development process.
5. Very short names can cause confusion and have limited usability due to their low character count, leading to inconsistent use in the development process.
6. Naming conventions like “.left .red” are insufficient when used alone, as they lack clarity in meaning. Moreover, they can be used in different contexts, making the CSS code complex.

All the situations mentioned above are rules established according to the habits of the web development community, specific library expectations, and in compliance with HTML and CSS standards. General usage aligns with these conventions, but they are not mandatory.

Naming standards are established to enhance code readability, maintain consistency in the project, provide organization, reduce the likelihood of errors, and facilitate effective collaboration within the team.

You can access the W3C document related to HTML, which defines the standards of the web world, here.

After explaining all of these, let’s conclude our article with a brief example code block.

<header class="header-container">
    <div class="logo-block">
        <h1>World of the Web</h1>
    </div>
    <nav class="menu-block">
        <ul>
            <li><a href="/">Subscribe</a></li>
            <li><a href="/">My</a></li>
            <li><a href="youtube.com/@worldoftheweb">Youtube</a></li>
            <li><a href="/">Channel</a></li>
        </ul>
    </nav>
    <div class="login-btn">
        <span>Subscribe</span>
    </div>
</header>

I warmly invite you all to my YouTube channel, where I not only share insightful content on web development but also explore the fascinating dynamics and technologies of the ever-evolving web world.

Twitter — Linkedin — Youtube

The sources referenced in our article are:

W3C

Freecodecamp

Worldoftheweb

Caniuse

Originally published at medium on Jan 18, 2024.