What does "@extend must be used with a %placeholder" mean?

Question

While linting the following SASS statements, I get @extend must be used with a %placeholder warning.

.reg-text {
  color: #202226;
  font-family: $font-page;
  font-size: 17px;
  line-height: 25px;
}

.reg-text-header {
  @extend .reg-text;
  font-weight: 600;
}

What does warning mean and how do I fix it. Afaik, .extend exists for the purpose of extending classes.

Answer 1

This is referring to an opinion that using @extend with normal CSS selectors is a bad idea.

I personally agree with this opinion, but it is an opinion nonetheless. Using @extend with any sort of selector is what the Sass spec allows, so I would possibly get in touch with the maintainers of your linter and request that the terminology in your error explains this.

If you use @extend to extend the definition of a selector, every time the selector is extended is is compiled to CSS that includes a reference of the selector for every time the @extend keyword is used.

If, however, you use @extend with placeholder selectors starting with % (A.K.A. "Silent Classes"), the functionality is much more in line with best practices. First off, any unused placeholder selectors are not even rendered to the final CSS (great for building reusable design libraries).

For example, if you have a block of reusable content within a CSS selector, consider converting it to use a placeholder selector instead:

.reg-text {
    color: #202226;
    font-family: $font-page;
    font-size: 17px;
    line-height: 25px;
}

.reg-text-header {
    @extend .reg-text; // this is inefficient and causes specificity issues!
    font-weight: 600;
}

// Instead, do this:

%reg-text {
    color: #202226;
    font-family: $font-page;
    font-size: 17px;
    line-height: 25px;
}

div.your-actual-selector-on-the-page .reg-text {
    @extend %reg-text;
}

div.your-actual-selector-on-the-page .reg-text-header {
    @extend %reg-text; // This compiles much neater and doesn't get in the way of specificity.
    font-weight: 600;
}