1

At present, a framework I work with utilises the classic clearfix:

@mixin clearfix {
    zoom: 1;

    &::before,
    &::after {
        content: '';
        display: table;
    }

    &::after {
        clear: both;
    }
}

I would like to know if it's safe to drop the use of the ::before now that IE7 is no longer supported, so that I can clearfix an element that might also require a pseudo element for decorative purposes. My proposal is to turn it into the following:

@mixin clearfix {
    &::after {
        clear: both;
        content: '';
        display: table;
    }
}

As far as I'm aware this will work just as it does with the ::before, but I wanted to make absolutely certain before making the change as this would affect literally hundreds of thousands of users if I got it wrong, and I don't want to be that guy.

Thanks in advance!

langauld
  • 64
  • 5
  • We would have no way of knowing. This is specific to your situation and so this question is opinion based or requires discussion and so is off-topic for Stack Overflow. I'm unclear on why you feel this change is nececsary... – Paulie_D Aug 04 '16 at 14:03
  • Is it really specific to my situation? I'd argue that in a world of many different clearfix solutions, this question has merit. As previously mentioned, my aim is to reduce the need to use both pseudo elements when a clearfix can be achieved with just one. I just wondered if anyone knew of any reason to continue using both pseudo elements. I feel the change may be necessary in order to free up one of the two pseudo elements, so it can be used as a decorative element which may also require the `content` or `display` properties. – langauld Aug 04 '16 at 14:24
  • But your statement *"this would affect literally hundreds of thousands of users"* IS specific to you. For general use it's **probably** fine but if it's mission critical then that's different. We have no way of knowing whether it is or not in your specific case. Only you can make that determination...based on your metrics. – Paulie_D Aug 04 '16 at 14:32
  • I understand your point now. Thanks for your input. – langauld Aug 04 '16 at 14:50

1 Answers1

0

I decided to modify the mixin so that I can use the simple version on cue, otherwise allowing it to default to the current version.

I also noticed that IE8 wasn't supported either, as there are double-colons used for the pseudos, so I fixed that too while I was there...

@mixin clear-fix($simple: false) {
    @if $simple != true {
        zoom: 1;

        &:before,
        &:after {
            content: '';
            display: table;
        }

        &:after {
            clear: both;
        }
    }
    @else {
        &::after {
            clear: both;
            content: '';
            display: table;
        }
    }
}

Usage:

@include clear-fix; // prints out old-skool :before/:after with IE7/8 support

@include clear-fix(true); // prints out simple ::after method

langauld
  • 64
  • 5