KuraFire Network

Developing with web standards has changed the way we create websites. We've started to separate structure and presentation, but are people making CSS become the new bloated document by taking the separating process too far? Are we forgetting Javascript, or did we accidentally get hooked on CSS more than we should have?

Jeremy Keith wrote about it quite a while ago, but recently the subject has resurfaced and he has written more about it, along with some others. I'm talking about separating behaviour and style. In short, the point is that one should not use %CSS% to perform tasks that Javascript was made for.

Now, I'm all in favor of this concept, let that be clear. One should not abuse CSS to do Javascript tasks, and I admit that I am guilty of doing just that to a certain extent on my own site (though luckily for me, this the only case where I've ever done this). The point of working according to all web standards is that you separate the three layers, which Robert Nyman described nicely. In short, the three layers are:

1. structure (HTML/XHTML), containing the content of the document, preferrably in a semantically meaningful way
2. presentation (CSS), containing everything that takes care of the visual presentation of the structure^[1]
3. behaviour (Javascript/DOM), containing script that adds interactivity to the document

What Jeremy Keith is trying to tell us is that we should not abuse CSS's :hover pseudo-class to take care of behaviour. No, we should use Javascript to change that. But this is where things are getting really messy: what he shows in his example, and what Mark Wubben shows us too (although he was kidding, apparently), is using Javascript to change the class. This is a grave and horrible mistake to make, because let's analyse what they're doing:

1. they take the presentation layer and give the link some style; colors, font-size, you name it.
2. they move to the behaviour layer on a certain state (:hover) and change the link's class
3. they move back to the presentation layer and give the link new styling, through the different class that it has received from the javascript

Where is the real behaviour? Where is the interactivity? You can, technically, say that moving your mouse over the link is interactivity, but what is the interactive thing that they're doing? Styling it! And wasn't CSS supposed to take care of style? Exactly!

They are overzealous in keeping things separated, and have taken two states of styling to the behaviour layer, but there is no real interactivity. We're only styling it differently; that's it.

It's a good point that they're trying to make: don't abuse CSS for Javascript tasks. But they're making a grave mistake in that they're abusing Javascript for CSS tasks. Now, if they were to make something else happen on that onmouseover state, it's a different story. For instance, if you want to display a submenu or an elaboration when someone hovers over the link, then it's a behaviour. But simply changing it to a different class (or giving it a class where it had none) is a task that still belongs in CSS, the presentation layer.

Another thing I want to mention is the inherent danger of this sort of overzealous behaviour. Now there are people going on about pseudo-classes "not belonging in the CSS Specification," which is a definite mistake (no offense to those who've uttered that). Take a look at the Pseudo-classes introduction from the official CSS2.1 specification:

In CSS 2.1, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4.0 (see [HTML40]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it.

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Pseudo-classes and pseudo-elements have a very clear and logical purpose, and with the exception of the dynamic pseudo-classes (:hover, :active, :focus), they only perform a presentational duty, which is what CSS is for. On the whole, they simply allow for much more powerful styling, preventing you from having to put superfluous markup in your documents (for instance, <span> tags around the first letter of a paragraph so that you can style it differently). What's more, many of them perform tasks that could never be achieved with markup, and I'm not sure that even Javascript could easily take care of them, if at all.

So don't be afraid to use pseudo-classes in your CSS, and don't be afraid to use a:hover either if you want to change the appearance of your links on a mouse-over state. However, keep these rather important things in mind when doing so:

• Internet Explorer, still the most widely used browser in the world, does not support any pseudo-classes except for the :hover and :active states on links (<a> elements)
• don't abuse the :hover pseudo-class to create behavioural changes in your pages, such as displaying a submenu when you hover over the main menu link. This is behaviour, and belongs in the behaviour layer (javascript). Merely styling the link differently, however, is not a behaviour, it is style.

In a future post, I will discuss the pseudo-elements ::before and ::after, which are definitely questionable compared to what I've discussed today.

Bookmark: Newsvine del.icio.us Digg