@extend can share styles in Sass, but it may cause CSS confusion. The core problems are: 1. Selector explosion: generates a large number of combined selectors when expanding multiple classes; 2. Unexpected output: Nested or pseudo-class extensions may generate invalid CSS; 3. Debugging difficulty: It is difficult to distinguish between direct and inherited styles. Mixin or % placeholders should be used first to avoid problems.

Sass's @extend directive is a powerful feature that lets you share styles between selectors without repeating the CSS. At first glance, it seems like a clean way to keep your code DRY (Don't Repeat Yourself). But while it can be useful in certain situations, it also comes with some pitfalls that can lead to messy or bloated CSS if used carelessly.

What @extend Actually Does

When you use @extend , Sass tells the compiler that one selector should inherit all the styles of another. For example:

 .message {
  padding: 10px;
  border: 1px solid #ccc;
}

.warning {
  @extend .message;
  background-color: #ffdd00;
}

This will generate:

 .message, .warning {
  padding: 10px;
  border: 1px solid #ccc;
}

.warning {
  background-color: #ffdd00;
}

So .warning gets the styles from .message without duplicating them in the CSS output. That sounds great — but here's where things can go wrong.

The Hidden Risks of Using @extend

1. Selector Explosion

If you extend a class that's already being extended by other classes, Sass tries to track all those relationships and outputs every possible combination. This can lead to a huge list of selectors in your CSS.

For example:

 .btn {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary {
  @extend .btn;
}

.success {
  @extend .btn;
}

.large {
  @extend .btn;
}

The resulting CSS might look like this:

 .btn, .primary, .success, .large {
  padding: 10px 20px;
  border-radius: 4px;
}

That doesn't seem too bad, but imagine doing this across dozens or hundreds of classes. Suddenly your CSS file becomes harder to read and maintain.

2. Unexpected Output

Because @extend affects how selectors are grouped, sometimes the generated CSS doesn't match what you expect. Especially when extending nested rules or pseudo-classes, you might end up with strange or invalid CSS.

For instance:

 a:hover {
  color: red;
}

.link-style {
  @extend a:hover;
}

This doesn't just apply the hover style to .link-style ; it makes .link-style act as if it were part of a:hover . That can cause confusing behavior depending on how browsers interpret the generated selector lists.

3. Harder Debugging

When you look at the final CSS, it's not always obvious which styles came from an @extend and which were written directly. This makes debugging trickier, especially for developers who didn't write the original SCSS.

When It Might Still Be Okay to Use @extend

There are cases where @extend works well and doesn't cause problems:

• When extending placeholder selectors ( % ) instead of real CSS classes.
• In small projects or isolated components where the complexity stays low.
• When the extended styles are very simple and don't interact with many other selectors.

Using %placeholder syntax helps because those aren't output into the final CSS unless they're extended:

 %btn-base {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary {
  @extend %btn-base;
}

This keeps your CSS cleaner since %btn-base won't show up on its own.

Alternatives to @extend

If you're worried about the downsides, consider these alternatives:

• Use mixins for reusable styles that may vary slightly.
• Keep your base classes simple and avoid deep or wide extension chains.
• Just repeat the class names in HTML and avoid complex inheritance altogether.

Mixins are often more predictable because they copy styles directly rather than creating selector relationships.

In short, @extend can save you some typing and reduce redundancy, but it can also create hard-to-maintain CSS if you're not careful. It's not inherently bad, but it's easy to misuse.

Basically, think twice before reaching for @extend — especially in large or complex projects.

The above is the detailed content of What is the @extend directive in Sass and what are its dangers?. For more information, please follow other related articles on the PHP Chinese website!