When should you use classes and when should you use IDs in CSS stylesheets?

When should you use id in a CSS stylesheet, and when should you use class? A simple principle is this: truly unique parts of a page framework can use id, while reusable styles and detail styles should use class. At the same time, you do not need to add an id or class to every element. When inheritance, element selectors, or structural selectors are enough, let CSS inherit and match naturally. In short, keep the number of id and class attributes as small and clear as possible.

ID & Class

ID

An id should be unique within an HTML document and should not be repeated. It is suitable for identifying elements that appear only once on a page, such as the main navigation, footer, a specific form input, or a page anchor.

Common uses include:

  • Page anchors: <section id="comments">
  • Form association: <label for="email"> corresponding to <input id="email">
  • Precise JavaScript lookup for a unique element
  • A small number of page-level structural identifiers, such as #header, #main, and #footer

However, when writing CSS, do not use lots of id selectors just to make selection “more precise.” id selectors have high specificity, which makes styles harder to override later. In many cases, class is more flexible.

Class

A class can be reused. It is suitable for expressing a type of style, a state, or a reusable component, such as a button, alert box, red text, or currently selected item.

Common uses include:

  • Reusable styles: .button, .red, .muted
  • Component styles: .card, .nav-item, .post-title
  • State styles: .active, .disabled, .error
  • Multiple elements sharing the same appearance

The same element can also have multiple classes at once:

<p class="message error">请输入正确的邮箱地址。</p>

This lets you separate the general style from the state style:

.message {
  padding: 8px 12px;
}

.error {
  color: #c00;
}

Example

In the example below, #red should correspond to only one element on the page, while .red can be reused by multiple elements:

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>ID 与 Class 示例</title>
  <style>
    #red {
      color: #f00;
    }

    .red {
      color: #f00;
    }
  </style>
</head>
<body>
  <p id="red">id</p>
  <p class="red">class</p>
  <p class="red">class2</p>
</body>
</html>

Practical Selection Advice

If an element appears only once on the page and needs to serve as an anchor, form association target, or script lookup target, you can consider using id. If you only want to apply styles, prefer class.

If multiple elements need to share the same style, use class. For example, if several paragraphs need red text, do not give each one a different id; use .red consistently instead.

If an element can already be selected clearly through the page structure, you do not necessarily need to add an extra class:

.article h2 {
  margin-top: 2em;
}

.article p {
  line-height: 1.8;
}

This is cleaner than adding a class to every heading and paragraph.

A simple summary:

  • id: unique, used sparingly, suitable for anchors and precise targeting.
  • class: reusable, commonly used, suitable for style reuse.
  • The clearer the CSS, the better; more id and class attributes do not automatically make it better.

Leave a Reply