CSS Refactoring: SASS Mixins vs Multiple Classes

Question

I am working on a Rails project using HAML / SASS, and I'm currently trying to refactor my CSS code. Maybe it's just a matter of taste, but I would like your thoughts on two different approaches: Do you usually use several CSS classes or prefer to use mixins? Are there any performance issues using this or that? Do some of you use both? If so, how did you split the code?

For instance:

Several classes

// 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 // ... 

Impurities

 // 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

the second is faster because the browser sees fewer code blocks

with this fact that the identifier selector is faster than the class selector, I go with the second

Edit:

Also the first one is hard to read and maintain

Answer 2

The right way to do this is 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 

You can prevent these classes from appearing in CSS by replacing the period with a percentage .