kingluddite/id-vs-class.md

## id-vs-class.md

      
    Raw
  

              id-vs-class.md
            
          
    Let's demonstrate the difference between using IDs and classes and why classes should generally be preferred over IDs when styling elements.
Suppose we have a simple HTML structure with a title and two paragraphs, and we want to style them differently:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ID vs Class</title>
  <style>
    #title {
      color: blue; /* Styling for the title */
    }

    .paragraph {
      color: red; /* Styling for paragraphs */
    }
  </style>
</head>
<body>
  <h1 id="title">Title</h1>
  <p class="paragraph">Paragraph 1</p>
  <p class="paragraph">Paragraph 2</p>
</body>
</html>
In this example:

We've used id="title" for the title and class="paragraph" for paragraphs.
The CSS selectors #title and .paragraph target elements with the respective ID and class.
The title is styled in blue, and the paragraphs are styled in red.

Now, let's say we want to add a third paragraph and style it differently from the other paragraphs. If we continue using IDs, we might be tempted to add another ID for the third paragraph:
<p id="paragraph3">Paragraph 3</p>
And then, in CSS:
#paragraph3 {
  color: green; /* Styling for the third paragraph */
}
However, this approach is less flexible and can lead to issues:


Specificity: IDs have higher specificity than classes. If you later want to override the styling of the third paragraph, you might need to use !important or write more specific selectors, which can make your CSS harder to maintain.


Reusability: Classes are reusable, while IDs should be unique on a page. If you decide to style another paragraph similarly to the third paragraph, you can't reuse the #paragraph3 styling without risking conflicts.


Clarity: IDs are often perceived as more important or significant elements, but they are not inherently more important for styling. Using classes for styling provides a clearer indication that the styling is intended for multiple elements.


Instead, it's generally better to use classes for styling elements whenever possible. Here's how we can rewrite the above example using classes for all paragraphs:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ID vs Class</title>
  <style>
    #title {
      color: blue; /* Styling for the title */
    }

    .paragraph {
      color: red; /* Styling for paragraphs */
    }

    .special {
      color: green; /* Styling for the third paragraph */
    }
  </style>
</head>
<body>
  <h1 id="title">Title</h1>
  <p class="paragraph">Paragraph 1</p>
  <p class="paragraph">Paragraph 2</p>
  <p class="paragraph special">Paragraph 3</p> <!-- Apply special class here -->
</body>
</html>
By using classes consistently, we ensure our styles are more maintainable, reusable, and flexible.