Is using a SASS mixin or is it better to create a separate class?

Question

In our project, we use SASS for style development. In addition, we use Bootstrap and it contains the following famous 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 compiling in CSS, SASS copies the entire contents of mixin to each class that we used mixin. Thus, this is a large amount of duplicated code. We use mixin about 100 times, so about 1000 extra lines in css.

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

• Use mixin and allow duplicate code
• Create a .clearfix class and use it in markup, for example <span class="example-class clearfix"> ... </span> to avoid duplication

Also, if anyone has a better solution, I will be happy to receive it. Any comments / discussions are welcome.

Answer 1

First, I would like to mention that applying overflow: hidden to an element with floating child elements clears the floats in the same way as including the clearfix mixin you are talking about.

For readability and performance, this is probably a clear winner. I have no evidence that overflow: hidden actually displays faster than clearfix , but I won’t be surprised if this happens. However, this is much less CSS, so it is definitely a winner in terms of uploaded data.

It is not always possible to use overflow: hidden , although there may be some relative positioning in your layout. In such cases, the best execution method is to create a global class for .clearfix and apply it to all the elements that should clean their children. Although this does not seem like it is easily maintained, I would say that it is easier to maintain, including this mix in your CSS, since you don’t have to flush the cached CSS every time you make changes.

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

The reason is that you cannot always leave in only one way (sometimes you can use the after element after something else, sometimes you might want the content to stretch outside their containers), so having both available makes sense anyway.

With both available methods, you can adapt to any scenario. Just remember that you could bind overflow: hidden to the class name to save it as DRY as .clearfix .

My 2 ¢.

Edit:

Alternatively, but perhaps not ideally, you can use @extend to generate the output as follows:

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

Thus, clearfix is ​​defined in one place, and not several times through a document. Personally, I'm not a big fan of this, but maybe this makes sense to you.

Answer 2

As others have already said, for a simple mixin utility like this, I would define it as an extension, for example:

 %clearfix { //clearfix code } 

And then use it in SASS as follows:

 .container{ @extend %clearfix; } 

Thus, no matter how many times you extend it, the code that it outputs is only once in CSS, not hundreds of times.

I would object to using classes like clearfloat or clearfix in markup if you don't need a second need: why mix markup when you can do it better and faster with CSS? Instead of tracking many different markup files, you can easily modify them in one place in your SASS file.

This allows you to have everything in one place, and not spread in many places, which simplifies its maintenance, as I know from experience.

Answer 3

I would suggest making it an “assistant” class, since you said your “I” well, they are much more flexible, and you put them where they are needed, there are also different clearfixes depending on the syntax, some are overflow fixes some of these are corrections of the layout of the table, etc., I would prefer to create a class and add them where necessary, this also makes your class layouts independent of clear fixation. Therefore, they can live as standalone and reusable codes, so as not to worry if clearfix can ruin potential layouts :)

I use them as classes for a better and more flexible way to make my layouts.

Change, so I would say that your solution number 2 is the best and for not the way you say, duplicating 100 lines of code.

Answer 4

I use bootstrap fewer files in my current project, and it has the following in the 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 the so-called “mixins,” which have some similarities with functions in programming languages. Theyre used to group CSS instructions in convenient, reusable classes. Mixins let you insert all the properties of a class into another class by simply entering the class name as one of its properties. Its just variables, but for whole classes. Any CSS class or id rule set can be mixed:

 .container{ .clearfix(); } 

As for clearfix , I just use it as clearfix because it performs one task that clears floats, and also that bootstrap offers one class to get a specific task. It is independent of other classes. You can use it in html as follows:

 <div class="clearfix"></div> 

Answer 5

I recommend using mixin and don't worry about a very small performance hit. In the future, if there are certain types of content that you no longer want to use clearfix, you will have to go through all your html to remove the tag.

It is always safer to keep your markup clean and make your layout and style in css. In this case, you make a very small performance hit to save in terms of future support. If you see performance as a problem, you might think about how you can tweak your markup or CSS so that you don't have so many classes that call .clearfix.

Answer 6

Primarily!

I would start by suggesting not to use: hidden overflow. This is a hack and, therefore, will lead to confusion of the code for people in the future, especially new people, for any business in which you use this code. There are also consequences that a JavaScript developer will have to deal with for any elements associated with a position.

So what is PROS and CONS for applying the clearfix class globally or just applying include in your SASS?

class clearfix

The clearfix in the DOM element shows that the content is floating to any person without looking further. Clearfix deletion is written only once, which reduces the size of the style files.

@include clearfix

Great whoooop dee doo, let everyone use include everywhere and expand our style sheet mask, we will. But wait! I found an interesting opportunity to really use it, which I will do for this reason.

If you have classes not in the template that requires clearfix, it is written in the entire DOM. I could imagine that I want to use the include option. Although it is quite rare.

In addition, since a class that is undergoing sensitive changes on the page suddenly requires clearfix, you can attach it to the pretty @import () file with bourbon. But even that would be rare, since you could just apply clearfix again and do it from the start.

Conclusion

I think a happy environment is required, which should always be when writing SASS. But this is my personal opinion :-P