Skip to content

swapping .clearfix and .clearfix() for css reduction #13538

@Harris-Miller

Description

@Harris-Miller

your current set up is so:

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.clearfix {
  .clearfix();
}

consider switching to this:

.clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.clearfix() {
  &:extend(.clearfix all);
}

it will reduce the amount of resulting css when devs use your mixin in their own less files. There will still be some duplicate with .clearfix() calling both mixin .clearfix() and selector .clearfix (known issue with less.js, and I do wish you would change .clearfix() to .makeclearfix() or .addclearfix() or whatever to alleviate this problem, but I know you won't).

When the good fellas over at LESS do fix that problem, this code (combined with my suggested change)

.my-class {
  .clearfix();
}

will result in:

.clearfix:before,
.clearfix:after,
.my-class:before,
.my-class:after {
  content: " ";
  display: table;
}
.clearfix:after,
.my-class:after {
  clear: both;
}
.my-class {
  color: blue;
}

and of course if a dev uses .clearfix(); throught their own less files, the resultant compiled css will see a pretty significant reduction in size

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions