CSS Рефакторинг: SASS Mixins vs Множественный класс

Question

Я работаю над проектом Rails, используя HAML/SASS и Я сейчас пытаюсь реорганизовать свой CSS-код. Может быть, это просто вопрос вкуса, но я бы хотел, чтобы вы думали о двух разных подходах: , вы обычно используете несколько классов CSS или предпочитаете использовать mixins? Существуют ли какие-либо проблемы с производительностью, используя ту или иную? Некоторые из вас используют оба варианта? Если да, то как вы разделите свой код?

Например:

Несколько классов

// index.html 
<div id="box1" class="rectangle rounded red"></div> 
<div id="box2" class="rectangle square green"></div> 

// style.css.sass 
.rounded 
    // ... 
.square 
    // ... 
.red 
    // ... 
.green 
    // ... 

Mixins

// index.html 
<div id="box1"></div> 
<div id="box2"></div> 

// style.css.sass 
@mixin square 
    // ... 
@mixin rounded 
    // ... 
@mixin red 
    // ... 
@mixin green 
    // ... 

#box1 
    // Some properties 
    // ... 
    @include rounded 
    @include red 

#box2 
    // Some properties 
    // ... 
    @include square 
    @include green 

Answer 1

второй быстрее, потому что браузер видеть меньше блоков кодов

с этим фактом, что ID селектор является более быстрым, чем класс селектора я иду со вторым

Edit:

Кроме того, первый один трудно читать и поддерживать

Answer 2

Правильный способ сделать это является extends.

index.html

<div id="box1" class="rectangle rounded red"></div> 
<div id="box2" class="rectangle square green"></div> 

style.css.sass

.rounded 
    // ... 
.square 
    // ... 
.red 
    // ... 
.green 
    // ... 

#box1 
    @extend .rounded 
    @extend .red 

#box2 
    @extend .square 
    @extend .red 

Вы можете предотвратить эти классы появляться в CSS по replacing the dot with percent.