Aspects

One of the aspects of CSS that really attracts me is its simplicity. It's a thread that CSS holds in common with HTML. One can learn HTML quickly, probably in a single day, without much a priori knowledge. CSS's syntax is clear and yet concise. But the real genius behind CSS is the realization that style is fairly orthogonal to content. Styling is an aspect, as in Aspect Oriented Programming (AOP).

In AOP, a pointcut is defined as a program construct that selects join points. Join Points are identifiable points in the execution of a program, such as a call to a method.

We could describe CSS's design using similar, analogous language. A CSS selector is the analog of the AOP pointcut. Instead of selecting join points, it selects identifiable points in a target document, such as a tag with an id. Like pointcuts, CSS selectors can select more than a single point. Any points matching the selector are returned.

In AOP, an advice is code that is executed before, after, or around a join point. Similarly in CSS contains a list of styling declarations that are analogous to AOP's advice body. What's even more interesting is that CSS's "pseudo-selectors" (:before, :after) are analogous to the ability in AOP to specify before and after advice.

The similarities abound. We can take this even further. To my knowledge, CSS does not provide an ":around" pseudo-selector. But that doesn't stop "designers" from coming up with their own simulations of the feature. Designers will often apply a "display: none;" style to the content of a block and yet slide in an image into the background of the containing block, thus essentially replacing content. This is analogous to AOP's "around" advice.

Having said all this, I'm no AOP expert. Far from it, although I've read about AOP, I have practically no experience in the field. But one can see that some aspects of AOP's design are quite evolved. AOP's design has more features compared to the design of CSS. It seems to me that we could evolve CSS by simply looking to what AOP has done, and adopting those parts we lack, those parts we need in the web world.

So, let's get to it! What parts do we lack? What parts do we need? I think it'd be really cool to open the floodgates for a while and make accessible a number of features to experiment with, and then after we've collectively gained some experience and grown wiser, tighten up the features to only those that really prove to be valuable. It's somewhat analogous to a brainstorming activity.

So let's brainstorm a bit:

What if we could have more than just styling advice bodies? Technically we already do. CSS positioning is all about sliding in other features to an otherwise styling specification.

Furthermore, we can try to take the notion of pseudo-selectors further. In addition to :before, and :after, we can introduce an :around or :replace. (Note: it turns out that CSS3 is adding a ton of new and powerful pseudo-selectors).

We could also try to extend "event" pseudo-selectors such as :hover to cover other things, such as :click.

We could even go as far as attempt to merge the syntax of AOP and CSS. Let's refactor the two designs into one? A sort of unified model for aspect design that applies to both code and xml documents?

Back down to earth for a moment: why not open CSS's advice bodies to things other than styling and positioning? Why not invoke code? This is what I'd like to see:

#some-id:click { javascript:callMe(); }

That'd be pretty good for starters.

Status: this type of capability is already in the pipeline for CSS3. CSS3's module: "behavioral extensions to CSS" is bundling in IE's HTC and Element Behavior (or Mozilla's analog: XBL) work. In addition, they'll be adding CSS-style event handling and code invocation (even the ability to embed script within a CSS file with the @script directive).