Grouping Selectors: Code Reuse and DRY Stylesheets

Introduction

In software engineering, there is a fundamental principle called DRY (Don't Repeat Yourself). If you write the same block of code multiple times, you make your project difficult to maintain: if you want to change a value, you have to find and modify it in ten different places.

In CSS, repeating the same styling declarations across different selectors leads to bloated stylesheets and slow page loads. Grouping Selectors is the native CSS feature that lets you bind multiple selectors to a single declaration block, keeping your stylesheets clean, readable, and highly maintainable.

---

What You Will Learn

• How to group element, class, and ID selectors using commas.
• The difference between grouping selectors (,) and combining selectors (spaces).
• How grouping selectors reduces HTTP payload sizes.
• Syntactic details: What happens if one selector in a group is invalid?

---

Prerequisites

• The Universal Selector: Global Resets, Box Sizing, and Inherits

---

Detailed Explanation: Grouping Rules

To group selectors, write them in a list separated by commas (,):

/* Styles apply to all three selectors */
h1, .card-title, #featured-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: #1e293b;
}

---

The Comma vs. Space Difference (Must Know)

A very common beginner mistake is confusing commas with spaces:

• Grouped Selector (with comma): h1, p
  • Targets both all <h1> elements and all <p> elements.
• Descendant Combinator (no comma): h1 p
  • Targets only <p> elements that are nested inside an <h1>.

---

Browser Parsing Details

If a browser parses a grouped selector and encounters an invalid selector (e.g. a non-existent pseudo-class), the browser will discard the entire rule set.

/* If the browser does not support :invalid-pseudo, the whole block is ignored! */
h1, p, a:invalid-pseudo {
  color: blue;
}

Solution: When using modern experimental selectors, write them in separate rule blocks rather than grouping them with standard selectors.

---

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Duplicate Code Block
    H1[h1 selector] -->|color: blue| D1{h1 styled}
    H2[h2 selector] -->|color: blue| D2{h2 styled}
    H3[h3 selector] -->|color: blue| D3{h3 styled}
    end
    
    subgraph Grouped Code Block
    G[h1, h2, h3 selector] -->|color: blue| All{All styled}
    end
    style G fill:#10B981,stroke:#fff,color:#fff

---

Code Examples

Example 1: DRY Card Components

Let's see how grouping styles simplifies a card layout with multiple content headers:

/* Separate Styles (Bloated) */
.card-primary {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: white;
}
.card-secondary {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc; /* Only this is different */
}

/* Grouped Styles (DRY) */
.card-primary, .card-secondary {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.card-primary {
  background-color: white;
}

.card-secondary {
  background-color: #f8fafc;
}

Example 2: Resetting List Formats

Group selectors to normalize unordered and ordered lists:

/* Group elements to remove defaults */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

---

Summary

Grouping selectors using commas allows developers to apply identical styles to multiple elements simultaneously. This reduces code replication, aligns with DRY programming methodologies, and compresses CSS file sizes to accelerate website loading speeds.

---

Related Articles

• Element Selectors
• Class Selectors

Next Tutorial

How do we target elements based on their HTML attributes (like input types or target values)? Let's check: Attribute Selectors.