Guil Hernandez
writes on July 18, 2013
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several ways we can clear floats with native CSS, but each requires repeating either a class in the markup or the same properties and values throughout the CSS.
Thankfully, Sass has our back with alternative clearing methods that save us time and many lines of code. In this article, we’ll target the most efficient approach to clearing floats with Sass.
Clearfix Nesting
Nesting seems like a convenient method for clearing floats because we can simply nest the clearfix wherever necessary and refer to the parent selector.
.wrap {
&:after {
content: "";
display: table;
clear: both;
}
}
While nesting is a handy Sass feature and it gets the job done, it’s not entirely efficient for clearing floats because it isn’t reusable or modular. We’ll need to nest the clearfix inside every rule that requires it, which may result in excessive CSS output. So there is a cost in code size and maintainability.
Using a Mixin
A different approach is to create a mixin for the clearfix:
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
Then include it wherever necessary:
.wrap {
...
@include clearfix;
}
My issue with this approach is that everywhere @include is used the entire block of code is repeated in the output, so it produces extra CSS.
Extending It
On a large-scale project, it’s best to use the @extend directive instead of a mixin, as it will output less CSS.
First we nest the clearfix inside a class selector:
.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
We can then extend the .clearfix class wherever necessary.
.wrap {
...
@extend .clearfix;
}
.main-header {
...
@extend .clearfix;
}
@extend will output one CSS rule that groups the selectors with .clearfix.
.clearfix,
.wrap,
.main-header {
&:after {
content: "";
display: table;
clear: both;
}
}
Using a Placeholder Selector
We can still improve things by creating a placeholder––or silent class––selector. This way nothing gets compiled to CSS unless we actually use it.
Placeholder selectors are defined by a %, so we’ll need to replace the class with:
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
Now we can extend it anywhere without repeating any CSS.
.wrap {
...
@extend %clearfix;
}
.main-header {
...
@extend %clearfix;
}
Conclusion
Using the @extend directive is more efficient and maintainable, which should always be our goal when writing CSS. Even though we should be minifying and Gzipping CSS in production, and the difference in file size and performance is hardly––if at all––noticeable, this approach just feels better overall.
Is there another clearfix method you use? Let us know in the comments below.
Our builds dont tend to use any pre processors, so standard class in css.
can we have bonus video on SASS!
It’s coming soon. Check out the updated roadmap: http://teamtreehouse.com/roadmap
🙂
I love to use nesting feature of Sass and it gives perfect structure to my personal website.
Shouldn’t a clearfix using SASS be best implemented via the placeholder selector?
It even allows you to list the class version as well with it if you want to have a module to go back to during those rapid prototyping/dynamic content moments of the development stage in which that won’t do.
Guil Hernandez
Great article on CSS Resets. Treehouse has helped improved my skills tenfold. I was wondering is Treehouse had an courses on Sass?
It’s being discussed. Stay tuned! 🙂
They had one before; it was discontinued; it’ll probably be refreshed in order to meet today’s standards of SASS practiioners. In the meantime, Treehouse has a great blog entry called ‘Everything you need to know about SASS’ or something like that’.
I really like it! Using placeholder classes to avoid the regular @extend problems and save some bits, is a nice idea.
Thanks for the read, Karsten.
I cleared about nesting from here but couldn’t understand about using of placeholder selector. Information are truly great.
I like just having it as a base style, and simplifying it is .cf, then just adding it to the HTML mark up. If there is an instance when I got do that, I shall use this method 😀
*as .cf
*instance when I can’t do that
Sorry, iPhone problems and just woke up error.
Wow, I like it! I’ve started getting into SASS a bit, but this has really got me excited! How handy! I remember reading in Handcrafted CSS by Dan Cederholm that its better to make one .clearfix class (which he liked to label “.group”) and use it where need in the HTML. That’s the approach I’ve taken since then. However, while it keeps your CSS clean, it always felt weird that I could make all that magic happen just in the stylesheet. SCSS is the answer! Thanks Guil.
Thanks for reading, Grant. I still use the “.group” clearfix with plain CSS. But like you said, Sass is the answer! 🙂
Great tip! Thanks Guil 🙂
Thanks a lot, Mr. West! 🙂