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

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this 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
Use mixin and allow duplicated code be
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.

Answer 2

I would suggest to make it a "helper" -class as you fine said your self, they are alot more agile and you put them where they are needed, also there are different clearfixes depending on the situration, some are overflow fixes some are table layout fixes and so on, i would rather create a class and add them where its needed, this also makes you layout classes independent of clear fixing. So they can live as stand alone and reusable codes not to have to worry if the clearfix could mess up potential layouts :)
Im using them as classes for a better and more agile way to do my layouts.
Edit, so i would say your solution number 2 is the best also for not as u are saying duplicating 100 lines of code.

Answer 3

Like others have said already, for a simple utility mixin like this, I'd define it as an extension instead, like this:
%clearfix {
//clearfix code
}
And then use it in the SASS like this:
.container{
#extend %clearfix;
}
This way, no matter how many times you extend it, the code that it outputs is in the CSS only once, instead of hundreds of times.
I would argue against using classes like clearfloat or clearfix in the markup unless you reeeallly need to-- why muddle up the markup when you can do it better and faster with CSS? Instead of tracking through a lot of different markup files, you can easily change it in one place, in your SASS file.
This allows you to have everything in one place, instead of spread out in many places, which makes maintaining it much easier, as I know from experience.

Answer 4

I am using bootstrap's less files in my current project and it has the following in mixins.less file:
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
.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;
}
}
we can define so-called "mixins", which have some similarities to functions in programming languages. They’re used to group CSS instructions in handy, reusable classes. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Any CSS class or id ruleset can be mixed-in that way:
.container{
.clearfix();
}
As far as clearfix is concerned, I just use it as clearfix because it is doing one task which is clearing floats and i.e. what bootstrap offers one class to get a particular task. It is independent of other classes.
You can use it in html like this:
<div class="clearfix"></div>

Answer 5

I recommend using the mixin and don't worry about the very small performance hit. In the future if there are certain content types that you no longer want to use the clearfix on, you will have to go through all of your html to remove the tag.
It is always safer to keep your markup clean and do your layout and styling in the css. In this case you are taking a very small performance hit in order to save yourself in terms of future support. If you are seeing performance as an issue, you might want to think about ways that you could set up your markup or css so that you don't have so many classes that call .clearfix.

Answer 6

First of all!
I would start off by suggesting not using overflow: hidden. It is a hack and therefore will lead to confusing code for people in the future, especially new people to any business you apply this code in. There are also repercussions that a JavaScript developer would have to contend with for any position related elements.
So what are the PROS and CONS of applying a clearfix class everywhere or just applying an include within your SASS?
clearfix class
clearfix on a DOM element shows that the content is floating to any person without looking any further. The clearfix styling is written only once, making your Stylesheet files smaller.
#include clearfix
Great whoooop dee doo, let's all use the include everywhere and expand our Stylesheet mass shall we. But wait! I did find an interesting opportunity to really use it, which I will do for this exact reason.
If you have classes not in a template that requires a clearfix, so written all over the DOM. I could imagine wanting to use the include option. Though this is fairly rare.
Also, as a class undergoing responsive changes on the page suddenly requires a clearfix, you can nestle that within a nice #import media() with bourbon neat for example. But even this would be rare as you could just apply the clearfix again and be done with it right from the start.
Conclusion
I think a happy medium is called for, which should always be the case when writing SASS. But that is my personal opinion :-P