Class Selectors: Reusable Utility Styles and Naming Standards

Introduction

If you write a website with 20 pages, and you style every paragraph using element selectors (p { ... }), every single paragraph on your site will look identical. But what if you want some paragraphs to look like alerts (red), some to look like success messages (green), and others to act as muted metadata text (gray)?

This is where Class Selectors shine. Class selectors are the workhorses of CSS. They allow you to apply specific, reusable styling rules to any element by simply adding a class attribute to the HTML tag, enabling modular and scalable design systems.

---

What You Will Learn

• How to write class selectors in CSS.
• How to apply multiple classes to a single HTML element.
• The concept of Utility Classes (the ancestor of Tailwind CSS).
• Introducing CSS Naming Conventions: BEM (Block, Element, Modifier).

---

Prerequisites

• Element Selectors: Tag-Based Styling and Resets

---

Detailed Explanation: Class Syntax

In HTML, you define classes using the class attribute. In CSS, you target classes by prefixing the class name with a period (.):

<!-- HTML -->
<p class="alert-success">Settings saved successfully!</p>

/* CSS */
.alert-success {
  background-color: #d1fae5; /* Light green background */
  color: #065f46;            /* Dark green text */
  padding: 12px;
  border-radius: 6px;
}

Note: Do NOT write the period inside the HTML class attribute (e.g. class=".alert-success" is incorrect). The period is only used in the CSS file to signify a class selector.

---

Multiple Classes

An HTML element is not limited to a single class. You can apply multiple classes by separating them with a space:

<button class="btn btn-large btn-danger">Delete Account</button>

This element will receive:

1. Global button structures from .btn (padding, borders).
2. Size configurations from .btn-large (increases padding and font size).
3. Red color styling from .btn-danger.

---

BEM Naming Convention (Block, Element, Modifier)

In large teams, CSS codebases get messy. To keep classes clean, engineers use BEM:

• Block: Standalone entity (e.g., .card, .menu).
• Element: Nested child inside the block, prefixed by two underscores (e.g., .card__title, .card__button).
• Modifier: Flag representing state or design adjustments, prefixed by two hyphens (e.g., .card__button--disabled, .card--dark).

/* BEM Layout structure */
.card { ... }
.card__title { ... }
.card__button { ... }
.card__button--active { ... }

---

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Multi-Class Architecture
    A[Base Class: .btn <br> Sets: padding, border-radius] --> C[HTML Element]
    B[Modifier Class: .btn--primary <br> Sets: background, color] --> C
    C --> D[Result: Styled Action Button]
    end
    style C fill:#3B82F6,stroke:#fff,color:#fff

---

Code Examples

Example 1: BEM Form Component Style

Let's design a styled newsletter form using BEM naming conventions:

<!-- index.html -->
<form class="subscribe-form">
  <input type="email" class="subscribe-form__input" placeholder="Your Email">
  <button class="subscribe-form__button subscribe-form__button--active">
    Subscribe
  </button>
</form>

/* style.css */

/* Block */
.subscribe-form {
  display: flex;
  gap: 10px;
  max-width: 400px;
}

/* Element */
.subscribe-form__input {
  flex: 1;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* Element */
.subscribe-form__button {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  font-weight: bold;
}

/* Modifier */
.subscribe-form__button--active {
  background-color: #3b82f6;
  color: white;
  cursor: pointer;
}

---

Summary

Class selectors are targeted using periods (.) in CSS and allow reusable visual styling across multiple HTML elements. By combining multiple classes on single elements and adopting structured naming frameworks like BEM, frontend developers write clean, maintainable stylesheets.

---

Related Articles

• Element Selectors
• ID Selectors

Next Tutorial

How do we style a single, completely unique element on a page? Let's check: ID Selectors.