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];
vs
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!
Top comments (6)
There is a specification problem with id's. "never use id in styling, id is for javascript to get an element" In a big project (especially not with vanilla js), you may not get an element for styling and targeting with id and document themselves; so there scaling matters. This is why we must have class attributes like clear_bugs { ... !important} or line styling where these things are ignored.
Reasons not to use IDs in CSS
Care to explain why id isn't appropriate in styling?
I don't think this is a very good example of divitus - or a good example of too many classes? / and also - bad advice to use ids here.
Almost any site you find will have 5-deep nested divs for no reason when there have been proper semantic elements since 2010. Many times now, it's because React requires a root element for boring reasons.
I don't see any reason to use an ID for anything but an anchor link. And definitely, no reason to style with them.
Just saying!
If you want an example of divitus and classitus - then just check out Tailwind CSS. That seems to be its main thing:
that markup is not semantic, those elements should semantic css class names too, not just littering of "utility-first" class names
unreadable
If you have a micro front-end architecture you must add unique hashes to the ids. Otherwise you have no guarantee that they are unique across the app
I agree. Divitis and classitis are definitely a thing these days.