Divitis and classitis

Germán Díaz de Rada — Sat, 02 Mar 2019 14:11:45 +0000

Is this a post about diseases?-you might be wondering. Absolutely. I want to talk about the disease of using divs and classes in our HTML when they are not required or the best option. Let's roll up our sleeves.

Divitis

Most of the websites out there do abuse of divs in the markup. Go to one of your favourites and inspect the HTML. I'm pretty sure you can easily find something like this:

<div id="posts">
    <ul>
        <li>My first post!<li>
        <li>I'm committed to write more...</li>
        <li>Quite a few more</li>
    </ul>
</div>

Which is targeted in CSS:

div#posts > ul { background-color:#000; }

However there is no real need to wrap the list with a div, since we can assign the id to the list:

<ul id="posts">
    <li>My first post!<li>
    <li>I'm committed to write more...</li>
    <li>Quite a few more</li>
</ul>

And style it even easier than before:

ul#posts { background-color:#000; }

I can go further. How many times we have seen something like the following?

<div class="small-text">
    This is an awesome post about how maniac I am when it comes to semantic markup
</div>

When the correct markup would be:

<p class="small-text">
    This is an awesome post about how maniac I am when it comes to semantic markup
</p>

These are just two examples of div tags misuse, which makes your code larger and more difficult to read and maintain.

Classitis

This is something that didn't happen as often 10 years ago. It stands for the abuse of classes in the HTML where we can use ids instead. Have a look at the example below:

<nav class="top-nav">...</nav>
...
<nav class="bottom-nav">...</nav>

Sounds familiar? I bet it does. Probably most of you would use that approach to target those elements in css and javascript. But hold on a second, is there a better way?

According to w3schools.com:

The HTML class attribute is used to define equal styles for elements with the same class name.

Whereas:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

So if the element is unique why don't we use the id?

<nav id="top-nav">...</nav>
...
<nav id="bottom-nav">...</nav>

I'm not saying that using the class is wrong, but I do think the id gives the markup a better semantics. We can also save some hassle in Javascript while targeting an element:

var topNav = document.getElementsByClassName('top-nav')[0];

var topNav = document.getElementById('top-nav');

We might not be saving dozens of lines, but it looks cleaner and makes the right use of the HTML elements.

I hope you liked my first post and found it useful! Would love to see your comments!

DEV Community: Germán Díaz de Rada

Divitis and classitis

Divitis

Classitis