Tips for how to decouple your HTML, CSS, and JavaScript

Why promote the (ab)use of the class attribute for binding user interface behavior?

It's 2013, people that write blogposts should be directing their readers (imo) to using the (html5) data-* attributes (which works equally simple) and actually removes the declaration and mixture of behavior and styling from your css.

For instance your button example:

    <button data-behavior='addtocart' data-somespecialparameter='iamspecial' class="add-item">Add to Cart</button>

Would behave on some javascript:

jQuery:

    $(document.body).on('click' 'button[data-behavior="addtocart"]', myHandlerFunction);

MooTools

    document.body.addEvent('click:relay(button[data-behavior="addtocart"])', myHandlerFunction);

Handler:

    function myHandlerFunction(ev) {
      console.log("I just got clicked. ", this.getAttribute('data-somespecialparameter'), this);
    }

Also, using observers on a container element makes sure that you can dynamically add and remove html elements without having to worry about cleaning up the even handlers. (binding it all on document.body or the nearest container can be debatable for speed reasons, but this is up to you)