IDs are Unique – But Why?

Ever since I started using CSS experienced programmers came to me saying my use of IDs was bad practice. But everyone so far has failed in giving me a good explanation of why. And it is very difficult for me to follow someone’s advice because of the “well, because IDs are unique” and “because I said so” reason.

Most recently I ran into the issue again when I drafting a landing page for my company recently and one of our frontenders told me that I used too many IDs which is bad practice. I still missed a solid answer to my childish – “but why?”. So this is when I decided to do my own research and after 2 or 3 nights of searching and reading I discovered not only one, but 4 explanations for creating unique IDs (meaning to have only one element on the page marked with that ID).

1. HTML Specs

One of the sites I was linked to revealed the HTML Documentation from W3C. This looks as intimidating and tiring as any other guideline, but it’s actually one of the most important documents to read and understand. If you know the specs you know how you can program your website as clean and as easy to understand for a browser as possible. And it’s clearly marked that

id = name[CS]

This attribute assigns a name to an element. This name must be unique in a document.

If you disobey the specs set in the documentation worst thing that can happen is that the browser won’t display your page correctly. And you know how all of the programmers love debugging…

The Documentation is for HTML4. The HTML5 documentation emphasises on IDs as unique identifiers for elements.

2. Change HTML with JavaScript

Another good reason to not use one ID for multiple Elements is that you can change the text of a document with javascript using the element’s ID. Now I still have to figure out how that works specifically and why I want to change a text with javascript instead of just changing the text inside the HTML, but I guess that will come in handy once you program dynamic websites and not just boring static ones like I do.

3. Use IDs to Create Anchor Tags

IDs can be used to link to a specific section of a page. Now if there are two or more elements on a page with the same ID – how should the browser know which one to link to ?

4. Specificity

Another good reason why you should be careful using IDs when styling a website comes in the biggest tongue twister in coding history (my coding history) – specificity.

Styles in CSS are differently weighted. Rules that are applied later in the document are applied first on the page: When you first define

div {
color: grey;}

and later in the css document

div {
color: green;}

the divs in the document will be green, not grey. So far so easy (why would someone style the same element differently anyways?).

Another way browsers weight CSS when displaying a page is by the position of the CSS itself. Inline CSS has the highest priority, followed by internal stylesheets, after that it will look into external stylesheets and if there are still some rules left to apply it will use the browser default settings.

And then there is specificity of CSS attributes and tags. And in terms of specificity, the ID attribute wins almost every battle. Specificity might not only be the biggest tongue twister, but also the most difficult to understand. Personally I like the explanation of specificity on CSS-Tricks the most. If you use the ID attribute you should be aware that it can override other styling elements which prevents your code from being displayed as you wish.

Very briefly summarised the specificity from elements is as follows: !important > Inline Styling > ID > Class > Element Reference.

While I’m still struggling to understand how exactly I should style a web page and what to consider when using which styling rule, I do understand what IDs are and why they should be applied carefully (and once per element per page!). I found a very useful rule of thumb from someone who explains specificity by using poker examples:

Put generic declarations first (body, a) to define the overall styles for the page
Override only those values necessary in the different sections with ID or class selectors (#navigation.a, .article)
Zero in on specific areas with additional ID or class selectors (#navigation ul.subsection a, #footer p a)

Other useful articles on the topic include: