General tips for semantically cleaning up HTML, CSS & JS?

Question

As I've gotten deeper into using jQuery with various sites I've worked on, I've found that I can get lost on whether a class attribute value is appended to an element in the DOM in order to attach an actual CSS style, or to bind an event to it. As such, I've started leaning towards using the rel attribute on anchor tags to denote if something is going to be bound to an event, keeping the class attribute specifically for stylization. (I've not delved into this deep enough to determine if there are any drawbacks or fundamental flaws with this approach, however, and am open to comments & criticisms on it.)

It got me to thinking that others must have similar things they do to help keep their code organized, and I'm interested in learning about some new ideas that might be floating around out there.

Answer 1

Usually this is not much of an issue for me, even in medium sized projects.

I usually assign classes for styling, and I often end up using same selectors in JS code. Semantically speaking, the rel attribute is not an appropriate way to store data. As it should point out the relation of a link to the target.

HTML5 makes things more flexible with data- custom attributes.

Answer 2

You use the class attribute when you have multiple HTML elements that have shared presentation or shared behavior.

So if you have several buttons for which you want to use the same event handler, then you give those buttons a class and then use JavaScript to select those elements (by class) in order to set the handler on them (you use a JavaScript library which has a selector engine). For example, in jQuery:

$(".addButton").click(function() {
    // the event handler
});

Classes are used both for CSS styling and JavaScript manipulation.