What is the best way to write text rules in CSS?

Question

css

Which option is better?
1. The idea is to list all classes that need the same text property values. and take them out, for example, into a separate file in SASS.

//семейства
.main-header, .logo, .section-header, .link-social ... {  font-family:  Raleway }
.sub-header, .another-header, .link-nav ... { font-family:  Helvetica }
.plain-text, .article-header, .link-outer ... { font-family:  Arial  }
// начертания
.main-header, .logo { font-weight: 700 }
.section-header, .sub-header, .another-header, .link-nav, .plain-text { font-weight: 600 }
//размеры, стили аналогично

2. Everything is as usual, copy-paste in each class

.main-header { font: 4em 700 italic Raleway}
.logo { font: 3 em  700 Raleway}
.section-header { font: 2em/.5em 600  italic Helvetica}
.link-social { font: 1.6em 600  Raleway}
//и так далее

In the first copy-paste of class names separated by commas, and in the second rules. What is better/worse?

Answer 1

list all classes that need the same text property values

%_font-Arial{
  font-family:  Arial;
}

%_font-Weight{
   font-weight: 600;
}

@import "Pattern";

.class{
  @extend %_font-Weight, %_font-Arial;
}