Classes vs. ids - best practices

Back to homepage

What are classes and ids?

Classes and IDs are two of the most commonly used selectors for styling targeted HTML elements with CSS. Selectors are essentially used to point to different parts (elements) of your HTML document that you want CSS to style in a particular way.

You could be forgiven for thinking that classes and ids can be used interchangeably and produce the same outcome. This is true to an extent, especially when working with just CSS. However the correct use of the two selectors is very important once you start working with a functional programming language such as JavaScript, not to mention the fact that there are a lot of opinions in the tech community around best practices for their use.

Truly understanding the difference between class and id attributes took me longer than I would care to admit.

The penny finally dropped - when I thought inside the box.

Using a class selector to style two identical boxes

What is a class?

  • global attribute
  • multiple HTML elements can share the same class
  • class selector preceeded by a period (.)

What is an id?

  • global attribute
  • defines a unique identifier
  • id selector preceeded by the # symbol

Lets look at the code I used to make these boxes

Defining "box-div" and "magic-box" class in HTML

screenshot of HTML code used for box class

Styling "box-div" and "magic-box" class in CSS

screenshot of CSS code used for box class

Here you can see that I defined a class "box-div" as I wanted any boxes I used in this blog post to be evenly spaced across the page.

I also defined a "magic-box" class (to reflect the wonder and awe I felt when I finally grasped this concept). A class selector could contain any amount of styling choices such as font style and size, background color, positioning etc.

In this case the only styling I wanted for my magic boxes was a delightful moccasin background.

Now let's say, hypothetically, I wanted to create a box SO unique and SO magnificent, that I never wanted it to be replicated again, even by myself, even on my own webpage.....hypothetically....

Using an id selector in this very hypothetical situation

What is a class?

  • global attribute
  • multiple HTML elements can share the same class
  • class selector preceeded by a period (.)

What is an id?

  • global attribute
  • defines a unique identifier
  • id selector preceeded by the # symbol

Now lets look at the code I used to change the styling of the id box to make it as unique and as one of a kind as the necklace that old lady threw in to the ocean at the end of the Titanic movie....

Assigning a unique id selector to the 'one of a kind box' in HTML

screenshot of HTML code used for 'one-of-a-kind-box'

Styling the 'one of a kind box ' in CSS

screenshot of CSS code used for 'one-of-a-kind-box '

This example shows us a couple of things about ids

  1. Ids are used when you want to target one element in your HTML document, as opposed to using classes when you want to target multiple.
  2. As you can see above, you can even place an Id within a class. An id will override a class, because an id is more specific, and browsers allow more specific selectors to override less specific selectors.

Also of note but not included in this blog post (I have already spent enough time on this) is the fact that ids can be used to anchor links in HTML. Here is an example I swiped from the internet:

example swiped from internet

Some notes on best practices

I could find lots of different and sometimes conflicting opinions with regards to best practices when using class and id selectors.

My main takeaways are:

  1. Semantics - be as brief and descriptive as possible when naming your class or id.
  2. Use class selectors by default, unless you're sure you need to use an id, eg, when using anchor link, or desiging the most unique box in the world.