Как лучше писать текстовые правила в CSS?

Question

[rtfm mftr]

Какой вариант лучше?
1. Идея в том чтобы перечислить все классы нуждающиеся в одинаковых значениях текстовых свойств. и вынести их, например в отдельный файл в 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. Все как обычно, в каждом классе копипаста

.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}
//и так далее

В первом копипаста имен классов через запятую, а во втором правил. Что лучше/хуже?

Comments

[dpismenny]

@extend

[rtfm mftr]

Денис Письменный: это само собой, но в скомпилированом файле-то все равно получится второй вариант. и кстати, почему экстенд, а не миксин? В SASS-синтаксисе миксин добавляется как "+mixinname" что выглядит изящнее чем "@extend %placeholdername"

[Роман Дворянов]

rtfmmftr: Если вы собираетесь переписывать скомпилированный файл, то зачем вам использовать SASS?

[dpismenny]

rtfmmftr: ну собственно поэтому и @extend: codepen.io/dpismenny/pen/ONzYpL

[rtfm mftr]

Денис Письменный: ааа, точно. то что надо

Answer 1

[Виталий Инчин ☢]

перечислить все классы нуждающиеся в одинаковых значениях текстовых свойств

Pattern.scss

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

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

Style.scss

@import "Pattern";

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