@extend in SASS. When is it time to stop - 2?

Question

css

How justified is it in SASS to build type constructs

%background-gold
  background-color: gold

Then do @extend in completely different elements - buttons, headings, links, paragraphs, forms? That is, how to write the entire CSS file not "around" the selectors, but "around" the rules. For example, we studied the layout, we see that the background color of all design elements can take only three values ​​and we get something like

.btn--twitter, .link--nav, .label--feedback.. //еще сто элементов
  { background-color: white }
.btn--submit, .link--outer, .label--subscribe.. //еще сто элементов
 { background-color: black }
.btn--reset, .link--readmore, .label--textarea.. //еще сто элементов
 { background-color: gold }

That is, in the final CSS file there will be many repetitions of elements in group selectors, in addition, their rules will be spaced in different places (but not in the original SASS file, where the structure remains clear). But at the same time, the rules themselves will never be repeated at all.
For what rules, with what number of values, and what set of extending elements is it reasonable to use extend?

Answer 1

I usually take out color codes (like $face: #face8d) into variables. This is a handy extension for naming colors that don't have CSS names. Another plus is that $face can be used for both bg and color, and much more. Otherwise, you make yourself a hostage of your own code.
And you don’t need to write a hundred elements in one line - the compiler will take care of this.
Good CSS is that you don't need to scroll a lot to make a couple of changes =)

Answer 2

I join those who answered above, and I will add that extend is not a tool that should be used everywhere. In the resulting code, extend will group all selectors in which another selector was called and append them. For example,

.selector-1, .selector 2 .selector-3, .selector-4 {
    display:block;
}

In some cases, this unnecessarily increases the size of the resulting css. Therefore, it is worth using this tool only when it is really justified - for example, when the amount of code inside will a priori take up more space than the list of selectors.

Answer 3

All this is certainly good, but you just need to take into account a few points. Firstly, when using extend, our rules when translating to css will be written to the selector that we are extending, and not to the place where we write it in the scss file, which can cause some problems. For example, we want to redefine the color of an element, and if we do this through extend, then there is a chance that nothing will work, since the extend rules are usually located at the beginning of the code, and the rest of the rules follow further, and if we have a selector somewhere that sets the color to our element, then the rules from extend are applied first, and then again the color value that is defined further in the code. Here it is necessary to design well, so as not to accidentally get confused in these rules and so that one does not override the other.
Secondly, you need to remember that extend does not work inside media queries, since there is a different scope there, so you will either have to duplicate everything with mixins, or just write normal css code inside media queries.