When to use class and id?

Is it usually best to always use class over id to label elements?

I just finished the Website Style Guide project and for some of the divs I used, some attributes were unique so I used a class and an id for it, but in the solution they used only classes for their divs.

Generally you should use the least specific selector when targeting an element. Use the element name if you can. Eg:

html {

}

div {

}

h1 {

}

If you can’t use an element name, for example say your choosing a more specific element, than you can go based on class:

HTML:
<h1> Don't style me </h1>

<h1 class="class name"> Style me </h1>

CSS:
.class {
  //styling here
}

Finally if a class won’t work, then use an ID. Usually you see ID’s used if a single element is being targeted for styling.

There are differing schools of thought in how best to set up a page for styling. The purists would suggest, as @8-bit-gaming does above, use the least specificity possible which translates to generic which translates to type selectors in CSS.

Specificity as you may or will have learned is a table we set up to identify the importance of a given selector. For type selectors, it has the right most column.

  • type: P
  • specifity: 0 0 0 1

It won’t matter which element name we use for type, it will have the same specificity as above. Generic selectors are the most broad reaching since they apply to the entire document. But, they are the easiest to override so we can take it up a level to give elements of that type, in certain situations, a different selector rule. One way is traversal. We identify the target element by selecting its parent, and doubling up on the type selector.

blockquote p {

}

The specificity is now, 0 0 0 2 so this selector rule will override the generic rule we started with since it has greater importance. Purists love this approach as opposed to using a class to identify this class of element grouping, known as a combinator. It really is enough in many instances to just know this element pairing. Now we just have to abide by that with consistent markup so we get the maximum payload.

Where a class becomes valuable is when we cannot nail the type of the element to one. We have several elements of differing type but they all still fit into a particular group, of sorts. This is a class. By declaring class selector rules we can address the group. They are also of greater importance since their specificity is, 0 0 1 0.

Notice we shifted to a different column? Regardless the number in columns to the right, even a 1 in this column will give the selector rule greater importance. It’s important to plan a document layout from the most generic to the most specific, in that order. For sanity sake, start with only type selectors as you build your layout. What will be your generic rule set that applies to the entire document? This is the most important thing to square up with from the beginning.

Bottom line, keep your document as generic as possible and use traversal to select as many targets as humanly possible. Only step it up when this becomes impossible or impractical.

There are differing schools of thought in how best to set up a page for styling). The purists would suggest, as @8-bit-gaming does above, use the least specificity possible which translates to generic which translates to type selectors in CSS.

Specificity as you may or will have learned is a table we set up to identify the importance of a given selector. For type selectors, it has the right most column.

  • type: P
  • specifity: 0 0 0 1

It won’t matter which element name we use for type, it will have the same specificity as above. Generic selectors are the most broad reaching since the apply to the entire document. But, they are the easiest to override so we can take it up a level to give elements of that type, in certain situations, a different selector rule. One way is traversal. We identify the target element by selecting its parent, and doubling up on the type selector.

blockquote p {

}

The specificity is now, 0 0 0 2 so this selector rule will override the generic rule we started with since it has greater importance. Purists love this approach as opposed to using a class to identify this class of element grouping, known as combinator selectors. It really is enough in many instances to just know this element pairing. Now we just have to abide by that with consistent markup so we get the maximum payload.

Where a class becomes valuable is when we cannot nail down the element to one type. We have several elements of differing type but they all still fit into a particular group, of sorts. This is a class. By declaring class selector rules we can address the group. They are also of greater importance since their specificity is, 0 0 1 0.

Notice we shifted to a different column? Regardless the number in column to the right, even a 1 in this column will give the selector rule greater importance. It’s important to plan a document layout from the most generic to the most specific, in that order. For sanity sake, start with only type selectors as you build your layout. What will be your generic rule set that applies to the entire document? This is the most important thing to square up with from the beginning.

Bottom line, keep your document as generic as possible and use traversal to select as many targets as humanly possible. Only step it up when this becomes impossible or impractical.

1 Like

Ids:

Ids are only used for one element and can’t be used for multiple elements

# is used to style elements with ids

Eg:

<style>
#sub-title { 
 color: red;     
}
</style>


<h2 id="sub-title">Some text</h2>

This makes the element with the id of sub-title color red.


Classes:

Classes are used for more than one element

. is used to style elements with classes

Eg:

<style>
.sub-title { 
 color: red;     
}
</style>


<h2 class="sub-title">Some text</h2>
<h2 class="sub-title">Some text here again</h2>

This makes the elements with the class of sub-title color red.