How to use the clearfix method with LESS for a higher HTML flexibility

I’ve included LESS into my design process since few months, feeling more and more happy about how cleaner and tidier I can keep the HTML, project after project, thanks also to awesomeness like The Semantic Grid System, and few strategic mixins that I can now implement into my CSS. Designing became faster and definitely more enjoyable. Indeed, a continuous discovery.

But one little thing still troubled me, and that was the clearfix method. I still had to set it as a class into the HTML, in strategic locations.

I really wanted to append the set of rules that the .clearfix class brings within, just as any other mixin or class in LESS. If you’re new of the awesomeness that LESS makes possible to you, here is an example, where we set a class (.borders) and then we include it into an other class (.my-class).

.apply-border {
	border: 1px solid #aaa;
	/* the list of properties can be infinite */
}

.my-class {
	margin: 0 auto;
	background-color: teal;
	.border;
	/* everything included in .border, is now set also for .my-class */
}

The clearfix method, as we all know it

The clearfix method is usually composed of the code below.

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

And that because it has to act at different levels.

How I’ve been using it since stone age

Usually we add it as a class, directly into the HTML.

<ul id="gallery" class="clearfix">
	<li><img src="images/img01.jpg"</li>
	<li><img src="images/img02.jpg"</li>
	<li><img src="images/img03.jpg"</li>
	<li><img src="images/img04.jpg"</li>
	<li><img src="images/img05.jpg"</li>
</ul>

This is clearly just an example of markup. The point is that usually I had to add a class to the containing element, in this case an ul. But it could be anything, a div, an article, a nav, and so on.

<nav id="main-nav" class="clearfix">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<div id="search"><!-- likely a form in here --></div>
</nav>

But, really, the precise markup does not matter right now. What does it matter is that the .clearfix class has a strict clearing effect. And this means that if I would like to dramatically change how to render the layout in future I will have eventually to first remove those classes from the HTML.

Optimal? Couldn’t I do better?

I do not think this is the optimal approach, since when I will change the design of the page, if no longer in need to clear any float after the #gallery element, I will have to fix the HTML first. You would probably agree that a fine design should aim for the purest semantics in the HTML, moving all the styles in the CSS file.

On the other hand, I’m enthusiastic about LESS because it literally allows me to style the HTML with a purity I couldn’t achieve before. Consequently the whole .clearfix set has to be written as mixin, so that I can then append it at #gallery as below.

#gallery {
	
	li {
		float: left;
	}
	
	.clearfix; /* here it is! */
}

Perhaps others figured it out before me. Since I did not find traces I’m publishing here my 2cents.

Rewriting the whole thing in a mixin complex!

Write the whole .clearfix thing like below.

.clearfix {

	&:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
	}
	
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

This makes the magic. You can now avoid to add a noisy class into the HTML. Keep your semantics clean and add the clearfix method via CSS. So much simpler been finally able to manipulate the design of a page just within one unique CSS file. Isn’t it?

How to use it

As a reminder, once you re-write the .clearfix complex as above, you can then append it where ever you need it, via CSS.

#gallery {
	
	li {
		float: left;
	}
	
	.clearfix; /* here it is! */
}

If not needed any longer, you can then remove it in the CSS, leaving untouched the HTML.

Conclusion

Finito! Done! That was short. If the article wasn’t clear, let me know.

Please, feel free to add your comment and review. At the present I’m implementing the clearfix method via LESS in all my current projects, the way I shown in this article. But honestly I did not tested it as much as I should. So, amend me if necessary. And thanks for reading!