CSS Academy · Lesson

Extend and Placeholder Selectors

Share styles between selectors using @extend and silent placeholder selectors.

Extend and Placeholder Selectors is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

@extend in Sass

@extend lets one selector inherit all the styles of another. Instead of duplicating code, extending creates a shared rule set in the compiled CSS.

.error {
  color: red;
  border: 1px solid red;
}

.critical-error {
  @extend .error;
  font-weight: bold;
}

/* Compiles to: .error, .critical-error { color: red; border: ... } */

Placeholder Selectors

A placeholder selector (prefixed with %) defines a block of styles that is never compiled on its own — only when extended. It generates no CSS unless something extends it.

%card-base {
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.product-card {
  @extend %card-base;
  padding: 16px;
}

.profile-card {
  @extend %card-base;
  display: flex;
}

Why Placeholders Over Classes

Extending a real class adds that class's entire selector context to the compiled output. Placeholders are cleaner — they output grouped selectors only for the extending selectors.

@extend Compiled Output

When multiple selectors extend the same placeholder, Sass groups them into a comma-separated rule:

/* Compiled CSS: */
.product-card, .profile-card {
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.product-card { padding: 16px; }
.profile-card { display: flex; }

@extend Pitfalls

@extend has significant caveats:

Cannot be used inside media queries
Can produce unexpected, large grouped selectors when chains of extends occur
Makes the compiled CSS harder to trace back to source files

@extend vs Mixin Trade-offs

Comparison:

@extend: smaller CSS (shared rules), but complex selector chains and media query limitations
@mixin: duplicates declarations but more predictable and can be used inside media queries

The Mixin is Usually Better

In modern Sass practice, mixins are generally preferred over @extend. HTTP/2 and gzip compression make declaration duplication less important, while the debuggability of mixins outweighs the minimal CSS size difference.

When @extend Makes Sense

@extend (with placeholders) is appropriate when:

Multiple selectors truly share the same semantic state (e.g., error states)
You are not inside a media query
The base styles are stable and well-defined

Placeholder and Theming

Placeholders work well for reset-like utility sets that multiple components inherit:

%visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden;
}

.skip-link { @extend %visually-hidden; }
.sr-label   { @extend %visually-hidden; }

Deprecation Consideration

Some style guides and teams ban @extend entirely due to its complexity and the selector bloat it can cause. Know the trade-offs and follow your team's conventions.

Quick Check

What is the difference between extending a regular class and extending a placeholder selector (%)?

Recap

@extend lets a selector inherit another's styles, grouping selectors in compiled CSS. Placeholders (%name) compile to nothing until extended — cleaner than extending real classes. Avoid @extend inside media queries. In modern Sass, mixins are generally preferred over @extend for their predictability and debuggability.

Frequently asked questions

Is the “Extend and Placeholder Selectors” lesson free?

Yes — the full text of “Extend and Placeholder Selectors” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Extend and Placeholder Selectors”?

Share styles between selectors using @extend and silent placeholder selectors. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Extend and Placeholder Selectors” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy