Classes vs IDs: Stop Overusing #id for Styling

Two notes can share a look while only one is the destination of a page link. Use a class for the shared appearance and an ID for that unique destination. Combining those jobs in one ID selector makes later styling changes harder to explain.

The example below deliberately contains a conflict. You will inspect why one urgent note stays grey even though the other turns blue. Save it as note-selectors.html and open it locally.

Reproduce the inconsistent notes

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reusable notes and a specificity conflict</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    .note {
      padding: 1rem;
      border-left: 4px solid #dce3ed;
      color: #626976;
    }
    #dispatch-note { color: #626976; }
    .note--urgent {
      color: #034bff;
      border-left-color: #034bff;
    }
    a { color: #034bff; }
  </style>
</head>
<body>
  <main>
    <h1>Two notes, one reusable style</h1>
    <p><a href="#dispatch-note">Jump to the dispatch note</a></p>
    <p id="dispatch-note" class="note note--urgent">
      Dispatch closes at 3pm. This text is unexpectedly grey.
    </p>
    <p class="note note--urgent">
      Collection closes at 4pm. This note is blue.
    </p>
  </main>

</body>
</html>

Both paragraphs have the same classes. Their borders are blue, but only the second paragraph has blue text. The dispatch paragraph has an extra ID, and its ID rule supplies the grey colour.

Find the winning declaration

1. Inspect the dispatch paragraph in DevTools.
2. Filter the Styles panel for color. Find the ID rule and the class modifier.
3. Check Computed to confirm that the final text colour is grey.
4. Inspect the collection paragraph. It has no matching ID rule, so its urgent class supplies the blue.

In this example the declarations have the same origin, importance and cascade layer, so selector specificity decides between them. An ID selector is more specific than a class selector. Moving the urgent rule later does not overcome that difference. Specificity is one stage of the cascade, not a rule that every ID always defeats every other possible declaration.

Remove the presentation rule, keep the destination

Delete #dispatch-note { color: #626976; } from the stylesheet. Keep the paragraph's ID and both of its classes. Reload.

Both urgent notes should now be blue. The normal grey colour still comes from the reusable base class when a note has no urgent modifier. The “Jump to the dispatch note” link should still reach the first paragraph, because an ID can identify a destination without having a CSS rule attached to it.

Use classes to describe roles

class="note note--urgent" contains two class names separated by whitespace. Either class can be reused on multiple elements. The base class owns common spacing; the modifier describes a variation. Its name should stay useful if the brand colour changes later.

An ID value must identify one element within its document. If you copy a card or form field, check its IDs and any corresponding fragments, label attributes or script selectors. Duplicating an ID can make navigation or label activation target the wrong element even when the visual styling looks correct.

Do not solve this by escalating selectors

Adding another ID, an inline colour or an important declaration may change the visible result, but it leaves several competing explanations in the stylesheet. Here the grey ID rule has no separate job, so removing it is the simpler repair.

There are legitimate uses for IDs in scripts and label/control relationships. You can put a class beside that ID for presentation. This does not prohibit styling a unique element; it gives you an easier default when the same appearance may be needed elsewhere.

Add a normal note

After applying the fix, add a third paragraph with class note only. Give it a new ID and add a link to that destination.

Expected result: the third paragraph is grey with a pale border; the first two remain blue. All fragment destinations are unique. Changing the base padding updates all three notes. If only one changes, compare the class names before adding another selector.

Continue to reading computed styles for a repeatable way to investigate a larger stylesheet.