ID vs. Class CSS: Which Should You Use?

When creating a website, it is crucial to have a unified style throughout the page. Any inconsistencies, such as using fonts or sizes that are not exact, can be very distracting to readers. However, if web developers were forced to go through each element within every page to make sure everything was in the correct form, it would be a giant pain.

Thankfully, developers can avoid this tedious task by implementing CSS selectors. There are five categories of selectors, but this article focuses on simple selectors: ID and class selectors.

When working in CSS, IDs and classes can identify and block elements together to ensure they share design elements. Properly used, IDs and classes can make code cleaner and easier to structure. They can be tricky to figure out at first, but once you get the hang of using these signifiers, they can simplify and speed up the coding process.

An ID allows developers to identify a single element in the HTML code and apply a particular style to it. IDs are specific and targeted, similar to a proper noun. There can be multiple elements on a page, but the ID marks a specific element. Each element can only have one ID, and each page can only have one element with that specific ID.

As an example, if we have five divs in our HTML, we can create an ID and have each of them be green and 60 pixels tall. IDs are identified with a hash character (#), followed by the ID name:

You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website. They are not unique. And while a single element can only have one ID, it can have multiple classes.

Classes are denoted by a period, followed by the class name. In this example, all elements tagged with the class “center” will be centered and green:

At first, figuring out when to use classes and IDs can be hard because they do very similar things. The difference is in the scale of the action and how it is performed. It usually takes developers a little while to get a feel for when to use each selector, but it gets easier with practice.

One way to think about IDs and classes is as barcodes and serial numbers. For example, all of the products in an electronics store have both a barcode and a serial number, but they provide different types of information.

All phones with the same make and model will have the same barcode to denote information such as price or specific product information, but it will not help you tell one phone from another. A serial number, however, is unique to a specific phone. This will not tell you anything about the price or where to locate it in the store, but it can identify a particular object.

Often, a specific element might have both an ID and a class (or multiple classes) associated with it.

At first, it can be difficult to understand when you should use an ID versus a class. Because they are similar, using one rather than the other is not exactly wrong, but correctly identifying when to use each signifier properly will leave you with cleaner code that is easier to work with.

No matter which you choose, be sure to identify the element(s) you are referencing clearly. Something might make sense to you in the moment, but it could be less obvious after a few days away from the code.

ID selectors are performed before class selectors because they are more specific. Therefore, they have priority. First, the browser determines the cascade origin and importance. Then, an algorithm called Specificity determines the order of operations for CSS declarations by assessing the weight of that particular CSS selector.

With just the two selectors, this is fairly simple. However, remember that there are numerous other selector categories. The more you use, the more difficult it can be to anticipate the order and have the code run correctly.

The final order is:

Since IDs are the first actions to be resolved, technically, they are faster. With modern processing speeds, however, the difference is so small that it should not be a determining factor in how you write your code.

Figuring out which selectors to use (and when) will help you write cleaner code, which is a more critical factor than the speed of operation.

Yes. An element can, and often does, have both a class and an ID selector. In fact, using multiple selectors can be an effective organizational tool — if you do it well. An example might look like this:

In some cases, an element can have an ID and multiple classes or other selectors. However, this can start to get confusing for new developers, so it is best to practice and make sure you clearly understand when to use the various selectors before starting to stack them.

Feature Image: Rohane Hamilton / EyeEm / Getty Images