Classes vs IDs and when to use them

While learning web development you may have come across classes and IDs. When you type out some HTML and use these classes and IDs you might notice that they both do the same thing when you go to style it in a CSS file. You might be able to use classes and IDs interchangeably on a simple website with only a few div containers, but when you are working with a bigger website, the browser might not be so kind as to let you use them any way you want. So what is the difference between a class and and ID, and what are the best practices in using them?

Imagine you are looking for a new computer. You come across one you like and proceed to check it out. During checkout the cashier will scan a barcode which will give information such as the price. Now, if you go and get another laptop of the same brand and model, the price will be the exact same and so will the barcode.

You can think of classes like product barcodes, it holds the same price for all computers with that barcode. A company can also update the price of all computers under that barcode without having to double check every single computer’s barcode and manually change its price. Putting a barcode on the product is like adding classes to HTML tags. Adjusting the price on all 100 or 1000 of those computers is like adjusting the CSS rules to all HTML tags with that class name.

Now that you’ve bought your imaginary computer and have an idea of what a class is, you bring it home and immediately it is faulty. You contact the manufacturer as instructed and they ask for a serial number. The serial number that you would provide doesn’t contain information like price, but it will have information that will be specific to that computer that you have bought, like date of production and warranty information. In other words the serial number is unique.

Just like how a serial number is unique to a specific product, an ID is unique to a tag on a website, it should ideally only be used once. If a manufacturer had 2 computers with the same serial number, then they may not be able to tell whether it is still under warranty creating a whole host of problems.

This is what differentiates itself from a class. You can attach multiple classes to tags and change all the styling at once, but you cannot do the same to an ID as there should only be one unique ID per page. An ID can also allow for a programmer to add jumps to specific areas of a page. If there were two IDs with the same name, then the browser would get confused and the link might not work as intended. This would be like how having two computers with the same serial numbers might confuse a manufacturer causing delays in getting your computer fixed through the warranty.

A class and an ID may have the same functionality, but they have some big differences. Like barcodes, classes can be used multiple times and can give wholesale changes to a bunch of different elements. Conversely, serial numbers are unique and so are IDs. You should not use more than one ID on a page as it can make some functions like jumping to areas of a page redundant.