CSS Tip: A Better Clearfix with Sass

blog_css

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Guil Hernandez

Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.

Comments

17 comments on “CSS Tip: A Better Clearfix with Sass

  1. 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! :)

  2. 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 :D

    • *as .cf

      *instance when I can’t do that

      Sorry, iPhone problems and just woke up error.

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

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

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

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