Hooks: How to Keep CSS and JavaScript Separate
One of the defining principles behind the Web Standards Movement is the separation of structure (HTML), presentation (CSS) and behaviour (DOM Scripting) in a document (web page). Meaning of course that all of your content gets marked up as HTML, everything that has to do with the way that it looks goes into style sheets and any behaviour is handled via DOM Scripting (aka JavaScript). As with any such methodology the three aforementioned layers of separation are nice and neat on paper, but when you get out into the real world of web development it can sometimes get a little messy.
Case in point, in a recent conversation with Sarven I was asked whether I thought the :hover pseudo-class in CSS belonged to the presentational or behavioural layer. After all, to “hover” is to perform an action, and an action is behavioural by it’s very nature. So why is the :hover pseudo-class then found in CSS, the presentational layer? To make things potentially more confusing, using JavaScript you can change the presentation of your document via the DOM’s style property collection. So in effect you can affect the document’s behaviour through the presentational layer and vice versa. This then begs to ask: what belongs where?
Well, let’s deal with CSS first. After being asked Sarven’s question I thought about it for a moment and realized that no, in fact, the :hover pseudo-class is not so much a behaviour in and of itself as its a behavioural hook exposed to the presentational layer for the purpose of styling elements that find themselves in a “hover” state. In other words, CSS doesn’t handle the behaviour, the browser does. CSS is simply being allowed–by the browser–to style an element that’s in a hover state.
Then of course there’s JavaScript’s ability to manipulate the document’s presentation. This is where I believe discretion is necessary. I’m of the mind that unless absolutely tied into the behaviour, all styling should remain in CSS. For example, rather than toggling an element’s display attribute value from block to none and back again in JavaScript I prefer to only toggle the element’s class name. That way I control the presentational aspect of the element in CSS. This keeps both layers as separate as possible by only offering CSS a hook from JavaScript in the form of a class name instead of applying the style rules directly from within JS.
So how do you tell when to write style rules directly from the behavioural layer and when not to? My rule of thumb is to only do so when I’m calculating positions or colours that aren’t simple predefined states–like show/hide. In other words, if the user is going to interact with the behavioural layer and cause it to recalculate position or colour values, then those values should be set via JavaScript. Otherwise I try and steer clear of writing entire sets of style rules directly in JavaScript. Doing that just defeats the purpose of good clean code in separate appropriate layers connected simply by hooks.