IDs vs Classes: a CSS Specificity Chapter

Lautaro Lobo
25 Aug, 2019

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:

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

PS: Consider subscribing to my monthly newsletter down below to get my recent posts right into your inbox 😉