IDs vs Classes: a CSS Specificity Chapter

Who will win? IDs or classes?

We may be able to answer this question by looking at the context, and the differences between each one.

Let’s jump right in!

What is CSS Specificity?

CSS Specificity is like a rank, that determines which set of rules will be applied to an element instead of other sets of rules.

If the browser finds two conflicting styles pointing to the same element, it will apply the rules with higher ‘ranking’.

When writing CSS, you should always remember this:

inline style > #id > .class > element

That’s the CSS Specificity Hierarchy between the CSS Selectors.

The all-mighty styles that would be applied no matter what, are the inline styles. Next, if there are no inline styles, the ID selector takes the lead. Among the other two, the class styles have a higher ranking than the element type ones.

Benefits of using them wisely

• You’ll get less conflicting styles
• You’ll find and correct conflicting styles faster
• You’ll understand better what’s happening in your stylesheet
• You’ll end up with a better CSS code (cleaner, shorter, more readable)

Differences between each CSS Selector

Inline styles

Most of the times these styles are never used. Why? Well, to write better code more humanly-readable, it’s better to have the CSS code all in one place: an external file.

Using inline styles is often seen as a bad practice. You are mixing HTML code with CSS so your code will be larger and harder to read and often harder to write too.

Try to avoid it.

IDs

IDs are unique, meaning that:

• there’s only one ID per element
• there’s only one element with that particular ID on the page

IDs are often used when adding JavaScript code, for performance sakes. But we are talking about CSS here! When adding styles, IDs are usually avoided because the code won’t end up being scalable nor modular. You can’t reuse styles, and if you are working on a big site, that will slow down the development process.

Classes

Classes are not unique, meaning that:

• the same class can be used on different elements
• the same element can have different classes

The common practice is to use mostly (if not only) classes for CSS.

Like said before, you can apply the same styles to different elements, ending up with less and easier to read code.

This approach works better with big websites when you don’t want to write over and over again styles to each element, just give a set of rules for a class and give all the desired elements the same class. And if you want to add some different styles, add another class and problem solved.

Element type

By using these you are styling the element (‘tag’) that has the specified name, like:

div {
    font-family: Roboto;
    border-radius: 4px;
}

It’s not really specific, right?

If you use ‘div’ as the selector, you’ll apply those styles to all the divs of your website.

Why would you do that?

There are plenty of divs on your site, ones on the footer, others on the navbar, on the header, some may contain text, others images…

There is no good rule of thumb on when to use type selectors. Just use classes a lot and add type selectors whenever possible, to keep specificity levels low, preventing styling conflicts.

Summary

You should keep the specificity levels low, so when a styling conflict shows up, you can easily solve it. The way to do it is using element type selectors and classes most of the times, along with pseudo-classes and attributes, avoiding IDs and inline styles.

Also, as told before, classes have several advantages over IDs.

So in the war between IDs and classes, classes win. But hey! You know the differences now, and keep in mind that there may be cases when using an ID selector would be better than using a class, so keep your eyes open!

There are some other good posts on the topic that I encourage for further reading:

• W3S: CSS Specificity
• Emma Wedekind on Dev: CSS Specificity
• CSS Tricks: The Difference Between ID and Class

---

I hope that this post has somehow helped you. Thanks for reading!

Comments

[Andrew Millar]

You forgot to mention "!important".

I had an issue just last Friday when I was trying to apply some style to an element. I needed a display none but the code was being ignored.
I could see the style="display: none" in the code in devtools but the element was still visible.
I was also under the impression that inline css overrules all. But not if there is an !important on the css property value.

The bootstrap class d-flex adds a display: flex !important. I imagine there is a good reason they added the important, even though that is something you should avoid, if you can.

In summery !important overrules everything independent of where it is applied! Something to keep in mind!

[Lautaro Lobo]

Oh yes!

I totally agree with you, you should use it only in specific cases, and don't overuse it.

This Stack Overflow question got great answers on the topic.

Also MDN has some rules of thumb to know when to use !important.

Thanks for pointing it out!

[Vlastimil Pospichal]

ID is identifier of one object in document. Class is a category.

[Aina Oluwatimilehin]

Nice one,
You said inline styling is bad, but if there's a situation you just need to apply just a style to an element do you need to create a new class for it...
IDK if you get me!

[Stephen Rayner]

If you are testing a fix you don’t need inline styles, test the fix in the browser.

[Aina Oluwatimilehin]

But When if I needed to apply the fix to the element.

[Andrew Millar]

Let's say you element is a link inside the last <li> inside an <ul> with the class 'nav'. Then you can target that element in your style sheet using .nav li:last-of-type a { ... }

You don't have to use a class to target an element.

[Aina Oluwatimilehin]

Thanks so much, for this eye-opening technique which I don't take note of.

[Lautaro Lobo]

You mean, when there's only one CSS rule to add to the element?

That means that your project is small. But it will grow.

Imagine that you want to add more styles one day, then you end up with a bunch of CSS inside your HTML... that's not easy to read, and also when working on your CSS file you may forget those inline styles, ending in a situation where you are asking yourself: where are these styles coming from!?

Also, if you add more inline styles you won't be able to reuse them.

It is simply better to have all the CSS on a different file, therefore you will avoid spaghetti-code and you are keeping the specificity levels low, so you will be able to solve conflicting styles better (without using !important).

You never know when your project will grow, and even if not, it's better to get used to good practices since the beginning of your career. So you won't be fighting against yourself when working on bigger projects.

Hope it helped :)

[Aina Oluwatimilehin]

Thanks for your great comment..
Yeah, It helped..

But Is there anything for giving CSS class name or what to consider when giving class name for a project...

[Lautaro Lobo]

Yes, here you have a freeCodeCamp post about BEM (Block-Element-Modifier). It's not really easy to use, I recommend to practice with it and you'll finally get used to it and know how to use it properly.

That's the most common thing when writing CSS classes I think.

SMACCS talks about naming conventions on CSS classes too, but it's not the main focus of the book.

Anyways, there are some others like ABEM and OOCSS. I didn't try them though.

PS: I forgot to say, if you work with Bootstrap, or something alike, you will use the predefined classes that come with it.

[james muriuki]

Resourceful!!!