Some writing by Trek

Clearfixing (some additional info) has become a pretty standard tool in the CSS toolbox web developers use to get happy semantic webpages out to the world. What's always bothered me about this strategy are the two ways that you implement it.

The first method is to go around adding classes to HTML elements that need the clearing ability added; everywhere you find that the height of a containing element isn't what you'd expect because of floating dab a little class='clearfix' (or .clearfix for us haml lovers) and voila, problem solved. Semantic purists will be vomiting into their mouthes a bit right now, but this isn't such a bad strategy. Its one drawback is keeping track of everywhere you put the class looks suspiciously like work (and work is something I try to avoid if possible).

The second method is to keep updating the css declaration to include the new elements you'd like the fix applied to. So, if you started out with

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

and need to make the div #my-cool-contents also properly contain its floated elements you'd alter your css to

.clearfix:after, #my-cool-contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix, #my-cool-contents {display: inline-block;}

and now anything with the class .clearfix or the id of my-cool-contents will clearfix itself. Before the semantic purists rejoice I have to mention: this can be a headache to maintain. Imagine a situation where three or four developers are all adding elements that need clearing and you can quickly end up with css declarations with dozens of rules kept in a separate location from the other rules for those elements. I've found this strategy to be even more work than the first.

It's just not pragmatic to trade semantic purism for more difficulty maintaining your css files.

Enter the sass mixin

A recent edge version of haml/sass includes the oft-requested ability to keep what are being called 'mixins' available for use in many places. If you're not familiar with haml or sass do yourself a favor and read the tutorial, play with them online, and then install them on your development box.

Mixins (in sass) are freestanding css rules not attached to any particular declaration. Sass normally looks like this:

#my-div
  :border   1px solid black
  :width     300px
  :margin   10px

where css directives are specifically attached to an element with the id of my-div and complies into this:

#my-div {
  border: 1px solid black;
  width: 300px;
  margin: 10px;
}

But, edge versions of sass will let you have bits free standing bit of css that an not attached to any declaration (and don't print until they are attached). You create them with the '=' character:

=message-box
  :padding 15px
  :border=  3px solid !layout_highlight_color

This snippet of sass can be attached to any sass declaration with the '+' character.

.warning
  :width 100%
  +message-box

will compile to

.warning {
  width: 100%
  padding: 15px;
  border: 3px solid #fafafa
}

Putting it all together

You can combine the sass mixin with repeatable css strategies (like clearfix) to get some pretty clean, semantic, and maintainable html and css.

Here is clearfix rendered as a sass mixin (note: you'll need a recent version of haml checked out from git and rake installed)

=clearfix
  *display:                 inline-block
  &:after
    content:                " "
    display:                block
    height:                 0
    clear:                  both
    visibility:             hidden

You can apply it anywhere in your sass that needs some clearfixing:

.images
  :width 44%
  +clearfix

#main-article
  :width 25%
  :float left
  +clearfix

Snag it

I keep clearfix (as both a class and mixin) sass file up in my git repo. Feel free to use and abuse it clearfix.sass