Abstracting javascript needs from CSS

It all started when I discovered jQuery. It was just the thing I was after, a fast way to learn javascript with the ability to write less and do more. The way you can manipulate the elements on the page by using a class instead of an ID made creating zebra striped tables with ease, dropdown submenus in seconds, it made me a better coder, or so I thought.

I never really followed through on learning javascript as a result and worse still failed to keep up with what was going on with the one thing that was important HTML. Since my departure from the official world of being a front-end developer almost 6 years ago now, quite a lot has become standardised or common practice. The biggest win for me recently has been understanding the data attribute better; because I still dabble for prototyping things and pet projects.

It makes everything beautiful. Now I’m using the data attribute as a hook for javascript, my CSS class names are more focussed on the style they’re applying to the element, although I haven’t reevaluated whether there is an argument for removing classes that describe the function of the element rather than the appearance we are giving it. When you think about it what is the style of (shopping-cart shopping-cart--empty), is it reflective of the colour, or shape, or is it describing the contents contained within that markup?

Right now I am working on a prototype with a focus on interaction design. I’ve been considering all the right things, what can I do without javascript? CSS animation can cover quite a lot now and is well supported, but it does have some horrible illogical markup. If I can’t use css-only for something, this is when I turn to javascript. Following a conversation with Graham, I’ve created two default data attributes (data-enabler, data-enhancer). Enablers are things like a link that triggers a modal (I’m now only using the default dialog element, that’s a whole other story), with enhancers being an element which can be made more interesting with some javascript – but will still work without it. So this might be for example a nested menu, or an element that expands, or maybe dynamically loaded in.

The success of code that lasts beyond the current lick of paint, or future functional development I believe lies in this move towards further separation of HTML for outputting content, CSS for presenting that content in style and javascript for interaction design.