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.

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.

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.

“How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.”

I’ve no experience with it, but I figured you might not have seen OCSS.