Use SASS mixin or create separate class is better? [closed]

Question

In our project we use SASS for styles development. Also, we use Bootstrap and it contains next well-known mixin:

@mixin clearfix {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        // Fixes Opera/contenteditable bug:
        // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

And we use it in our styles:

.class-example {
   @include clearfix();
   . . .
}

After the compilation into CSS, SASS copies all content of mixin into each class we used mixin. So, it's a big amount of duplicated code. We use mixin about 100 times, so it's about 1000 extra lines in css.

So, the question: which is better form performance/support/readability/etc. point of view

1. Use mixin and allow duplicated code be
2. Create class .clearfix and use it in markup like <span class="example-class clearfix"> ... </span> to avoid duplication

Also, if someone has better solution - I'll be glad to get it. Any comments/discussions are welcome.

Answer 1

To begin with, I'd like to mention that applying overflow: hidden to an element with floating children clears the floats much like how including the clearfix mixin you're talking about does it.

For readability and performance, this is probably the clear winner. I don't have any data supporting that overflow: hidden actually renders faster than the clearfix, but I wouldn't be surprised if it does. It's much less CSS, though, so it's definitely a winner in terms of downloaded data.

It's not always possible to use overflow: hidden though as your layout may have some relative positioning going on. In those cases, the best performant method is to create a global class for .clearfix and apply it to all elements that are supposed to clear their children. While it doesn't sound like it's easily maintainable, I'd argue that it is more easily maintainable that including that mixin throughout your CSS since you won't have to clear the cached CSS whenever you make changes.

My recommendation is to use both overflow: hidden and .clearfix. Scrap @include clearfix.

The reasoning is that you can't always get away with just one method (sometimes you may want to use the :after element for something else, sometimes you may want content to stretch outside their containers) so having both available makes sense anyway.

With both methods available you're able to adapt to any scenario. Just remember you could tie overflow: hidden to a class name to keep it just as DRY as .clearfix.

My 2¢.

Edit:

Alternatively, but maybe not ideally, you could use @extend to create an output like this:

.element-1,
.element-2,
.element-3,
.element-4,
.element-5 {
  // clearfix stuff
}

So that clearfix is defined at one place rather than multiple times through the document. Personally I'm not a big fan of it, but perhaps it makes sense to you.