11

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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Richard Jordan
  • 8,066
  • 3
  • 39
  • 45

4 Answers4

32

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;
}
Alfred Bez
  • 1,191
  • 1
  • 14
  • 31
Richard Jordan
  • 8,066
  • 3
  • 39
  • 45
  • Ah it is working... There was an error elsewhere in the scss... still not sure if this is the best solution though... any other ideas out there? – Richard Jordan Aug 23 '11 at 18:39
  • 1
    That's awesome advice Nathan - thanks - really appreciate it :-) ...you should have put this as a standalone answer so i could vote it up and you can get some more points :-) i will give something like this a try - what i am trying to avoid now (don't remember if it mattered when i first wrote this post) is the need to have non-semantic classes or anything else in my html – Richard Jordan Dec 02 '11 at 22:56
  • having worked with both - i still prefer the solution that doesn't use extend – Richard Jordan Feb 05 '12 at 05:23
  • 1
    How can extend produce less css? If something, it should produce more code since the .clearfix itself is included as well. – tbleckert May 09 '13 at 10:26
  • I'd recommend against using `@extend` for clearfix. Ideally, you should break clearfix into it's own utility class and use in your markup when needed to prevent repeated, unnecessary styling repetition. If you're going to extend, or use a placeholder/pseudo class; make sure you are strict, and **only** use it inside selectors that are nested one level or below. – robertlyall Jul 01 '14 at 09:55
  • you should use a placeholder class %clearfix... if your going to use extends rather then mixin – Snymax Aug 03 '14 at 19:23
13

To achieve less code output by using @extend, define clearfix as placeholder (here just for modern browsers w/o IE 6+7):

Sass code:

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

CSS output will be:

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}
Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • 1
    This is the best answer, since it uses [silent classes](https://speakerdeck.com/anotheruiguy/sass-3-dot-2-silent-classes) instead of a mixin or placeholder. – Rob Erskine Jul 10 '13 at 03:13
4
// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }
denisjacquemin
  • 7,414
  • 10
  • 55
  • 72
2

Why not use the Compass framework? It already provides mixins for clearfix among a host of other useful mixins and utilities. It's always better to look for existing tools rather than to have to maintain additional code yourself.

Rhysyngsun
  • 951
  • 6
  • 17
  • 1
    Yeah - I agree with using what's out there... the challenge I have is that compass seems quite dauntingly complicated... I looked at it and got intimidated so decided to roll my own... – Richard Jordan Aug 23 '11 at 20:48
  • 1
    Compass has a lot of mixins and utilities, yes it can be overwhelming, but their documentation is nicely organized and more likely than not you're only going to use a small slice of what they provide initially. you can even view source within their docs in case you have any doubts as to how they implemented it. – Rhysyngsun Aug 23 '11 at 20:53
  • 2
    @davidg I can't disagree with your point, but I felt pointing him in the direction of a framework that is going to solve a lot of other CSS boilerplate problems was more beneficial than giving him a mixin that, as I pointed out, he now has responsibility to maintain. – Rhysyngsun Nov 19 '12 at 15:30