Question

I want to remove the clearfix class from my HTML and include a clearfix mixin in my SCSS (Rails 3.1 application). What is the best approach to this?

I am thinking of just taking the HTML 5 Boilerplate clearfix and turning it into a mixin, then @including it within the CSS for elements that need clearfixing.

Copied from HTML5 Boilerplate:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }

Is there a drawback to this? Is there a better way? Can I safely remove clearfix from my HTML markup this way?

Answer 1

I should probably have added – this is the solution I came up with. I am still pretty new to all this so I don’t know if this will actually do the same job as setting an element’s class to clearfix and using the HTML5 boilerplate code above.

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

Edit:
It’s best to use @extend instead of a mixin as it will produce much less CSS code.
Also, it’s useful to use a silent class (denoted by %) when using @extend. This prevents unexpected CSS rules and eliminates the rule you’re extending if it’s not being used directly.

%clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

#head {
    @extend %clearfix;
    padding: 45px 0 14px; margin: 0 35px 0;
    border-bottom: 1px solid $border;
}