Best practices associated with using Classes vs IDs

To talk about the best practices for Classes and IDs we first need to talk about CSS specificity. This is the hierarchy that is in place to determine what CSS code will have precedence over the other. MDN Web Docs has this below definition for specificity.

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

That’s a mouthful, isn’t it? Let’s simplify it so we’re all on the same page. CSS is code for websites which provides the design instructions to your internet browser on how to display the website. It’s like if you worked at a Pizza shop and the manager tells you how to make and present the pizza for the end customers. In the case of a pizza shop they have standards on what the end customer will see. When making the pizza the boss will give you instructions for each pizza flavour, it could be how many toppings, what toppings, sauces etc. Likewise, in CSS we need to add instructions for things like colour, type of font, how big the images on the page are, where they sit on the page etc. When you’re building these websites, you must add ingredients to spice things up because a plain pizza base is really not going to be anyone’s cup of tea. This is where Classes and IDs come into play.

If we simplify this down, both Classes and ID are used to style html code (our pizza base) and have different weights attached to them. Depending on which one weighs the most, the code overwrites the style of the other. In this explanation we’re going to forget about the pizzas. Let’s talk about weight. Let’s say there’s a competition of who weighs the most, the ID selector has a weight of 100kg, and Class selector has a weight of 50kg. From that alone we can tell that the ID selector at 100kg is going to win and have precedence over the lighter 50kg Class selector.

We can see this in the below test. Our h1 element has two selectors, one for Class and one for ID applied in HTML.

Snippet of HTML code

In our CSS stylesheet we use ‘#’ to address IDs followed by the value we give to it; in this case I gave the ID a value of ‘blue’. Similarly, to address class selectors you use ‘.’ Followed once again by the value which I have put as ‘red’.

Since CSS runs code from top to bottom, like how we read a block of text, from top to bottom, our h1 element should show the background colour of red since that was the last line of code to be read by the browser.

Code snippet from CSS for Class and ID

But, due to the weight of the ID at a whopping 100kg, the browser determines that it has precedence over the smaller petite 50kg Class selector and thus our Hello World! H1 header will be showing the colour blue.

running code in browser example - ID overrides Class

Using the example above, you can see that the ID outweighs the Class selector. This means you could write code and style with class selector but if you want specific elements being overwritten you can use the ID selector and address the specific styles that way.

A key difference with ID and Class is that IDs are unique and can only be used once in the HTML page whilst classes can be reused as many times as required. This means if you have an element in your HTML code that is only going to appear just once, you are safe to use the ID selector. If you are planning to reuse the selector multiple times in your HTML code you should use the Class selector. ID will in most cases be used only sparingly. For example, if you have 5 tables of data in your HTML code and you want them all to look the same, you would add class selectors to each table in HTML and then style them in CSS using just one Class “.table” selector. If you were to use ID selector you would need to address each table individually with the unique IDs to be styled. E.g “#table-1”, “#table-2” “#table-3” and so forth.

In conclusion, it’s likely best to use ID very sparingly, in most cases parts of your website are going to reused over and over again, it will make coding the website a lot more simple and if someone goes to read your code for the website it will save them a lot of headaches.