Question

I know difference between ID and Class. I know ID needs to be unique and can be used to target specific container with java or jquery.

Problem I’m having is to grasp the correct semantic use of each.

Should I use ID for everything like footer/header/main content/everything and use class only for repeating containers like <p>, <li>?

I know in the end it doesn’t matter. But I hate having no logic in what I’m doing…

Answer 1

Pretty much yes. Sometimes you don’t need classes or IDs at all – use it when you need it and not because you think you should.

For example, you don’t need to add class to every li element in the nav, you can have something like this:

<div id="header">
    <a href="#">Logo</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

And you can easily style (or target with javascript) any element:

#header > a { /* logo */ }

#header ul { /* nav container */ }

#header ul li {}

#header ul li a {}

etc.

I hope it answers your question!