Unobtrusive CSS becomes practical and Neat.

We have had Unobtrusive JavaScript for a while now, at least 2006 with jQuery, which meant the rather that doing in-line JavaScript like :

1
 <input type="text" name="date" onchange="validateDate()" />

we could just do a clean

1
 <input id="date" type="text" name="date" />

and wire it with

1
 window.onload = function() { document.getElementById('date').onchange = validateDate; };

The big advantage being that the wiring of the validate could be in another file, so:

• the html markup has no or minimal javascript
• the design can be developed more independently of the behavior
• the JavaScript can be validated and tested, independently of the design
• the behavior could even be applied programmatically : find all input fields, if it has a class of “validate” and a class of “date”, then “onchange” apply the “validateDate” function

Another way of thinking about this would be to say that HTML Markup is loosely coupled to the JavaScript, or the markup doesn’t know about behaviour. Which makes it easier to change the markup or the behavior (say by change want or how validation happens)

But using our CSS Grid frameworks meant explicitly using the presentation class names in our HTML markup. Lots of

1
 

such that even though HTML5 gave us lots of good semantic tags (header, nav, section, footer) we still had layout presentation class names scattered in our HTML (polluting the markup, as it were), marking it look almost as bad as the bad old day of font, color and strong tags throughout the markup (see “HTML Vomit”). And those presentation class names where inevitably tightly tied to a give CSS framework.

The Holy Grail of semantic CSS seemed a distant and impractical ideal (see LukeW : CSS Best Practices, Semantic Markup), and despite long debate on What Makes For a Semantic Class Name?, no resolution in sight.

Until now!

The clever people at ThoughtBot have just released Bourbon Neat, a CSS fluid grid framework built on top of Sass and Bourbon using em units and golden ratios.

Now fluid grids CSS framework are (relativity) nothing new. (Bourbin is ThoughtBot’s library for the CSS processor SASS. (Compass is another SASS library) )

But, what they have done is take advantage of a new SASS feature (version 3.2.0 as of August 2012) called Mixin Blocks which will simplify Mixin’s (functions for CSS), and used them so you can extended your html markup with the frameworks grid classes.

And BOOM! much clearer markup!

For instance, applying a grid-based layout to this markup :

1
2
<aside></aside>

<article></article>

…is only two mixins away:

1
 section.blog { @include outer-container; aside { @include span-columns(4); } article { @include span-columns(8); } }

So what is happening here is that the markup (“section” , “aside” , “article”) and class (“blog”) have the grids layout applied to them (“outer-container” and the “span-columns” function). BOOM!

And since the HTML Markup is loosely coupled to the CSS layout ( the markup doesn’t know about its presentation) it is easier to change the presentation, whether for Responsive Design reasons, or to try a very different CSS framework or layout. If I wanted to change the presentation I don’t change the HTML markup but the CSS file.

Neat will not be the last framework to use this technique. Mixin Blocks could be use to wrap any framework classes and allow them to extend your existing classes, but I think this is the start of Unobtrusive CSS becoming practical! Very Neat.