LearnCSS Tip: A Better Clearfix with Sass

   
Avatar

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.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

17 Responses to “CSS Tip: A Better Clearfix with Sass”

  1. Our builds dont tend to use any pre processors, so standard class in css.

  2. can we have bonus video on SASS!

  3. I love to use nesting feature of Sass and it gives perfect structure to my personal website.

  4. lozandier on July 21, 2013 at 1:56 pm said:

    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.

  5. Elijah Chiurri on July 19, 2013 at 11:21 pm said:

    Guil Hernandez
    Great article on CSS Resets. Treehouse has helped improved my skills tenfold. I was wondering is Treehouse had an courses on Sass?

    • Guil Hernandez on July 20, 2013 at 3:12 pm said:

      It’s being discussed. Stay tuned! 🙂

    • lozandier on July 21, 2013 at 1:53 pm said:

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

  6. Karsten Buckstegge on July 19, 2013 at 8:33 am said:

    I really like it! Using placeholder classes to avoid the regular @extend problems and save some bits, is a nice idea.

  7. I cleared about nesting from here but couldn’t understand about using of placeholder selector. Information are truly great.

  8. 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 😀

  9. gzabrisk on July 18, 2013 at 11:17 am said:

    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.

  10. Great tip! Thanks Guil 🙂

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop