CSS Pseudo-Selectors

Recently, I was quite happy to learn about Shaun Inman’s contribution to CSS maintenance sanity, Cascading Style Sheets Server-Side Constants. At the same time, I also share Eric Meyer’s frustration over the frequent knee-jerk “use a preprocessor” responses to proposals such as (and not limited to) CSS constants.

Case in point: A few weeks ago, I was perusing the www-style mailing list archives and read a post by Emrah Baskaya all about CSS parent pseudo-containers. I highly recommend reading Emrah’s post and the entire thread that flows from it.

I too have been wrestling with keeping CSS maintainable, beyond the basiscs like consistent formatting and ease of reading. Sometimes I’ll have no choice but to repeat (repeat) myself ad nauseam in the CSS with the same selectors over and over and over again. Not due to poor markup - at least I don’t believe that’s the case. Rather, if I must have something nested a few levels deep and it must be assigned a class vs. an id, well, “the needs of the many outweigh the needs of the few.”

Can we keep it simple in the midst of all this deep nesting? If I had my druthers I’d say we could, and we should. Here’s how I’d do it within the scope of CSS alone.

Suppose you have CSS akin to:

.class .nested-class .another-nested-class dl { ... }
.class .nested-class .another-nested-class dl.subclass { ... }
.class .nested-class .another-nested-class dl dt { ... }
.class .nested-class .another-nested-class dl.subclass dt { ... }
.class .nested-class .another-nested-class dl dd { ... }
.class .nested-class .another-nested-class dl.subclass dd { ... }
.class .nested-class .another-nested-class dl dd.img img { ... }
.class .nested-class .another-nested-class dl.subclass dd.img img { ... }

Let’s also suppose that, for whatever reason, we require this level of nesting. Unfortunately it’s very repetitive! It would be great if we could refactor the CSS and eliminate it. Well, how about this?

.class .nested-class .another-nested-class (
dl { ... }
dl.subclass { ... }
dl dt { ... }
dl.subclass dt { ... }
dl dd { ... }
dl.subclass dd { ... }
dl dd.img img { ... }
dl.subclass dd.img img { ... }
)

Here we’ve defined a scope for .class .nested-class .another-nested-class. All the CSS within parentheses is then applied within that scope.

Taking this in a slightly different direction, let’s only specify selectors within parentheses. Now you have a handy “pseudo-selector” shorthand. We’ve just defined a constant for selectors!

.pseudo-class ( .class .nested-class .another-nested-class )

.pseudo-class dl { ... }
.pseudo-class dl.subclass { ... }
.pseudo-class dl dt { ... }
.pseudo-class dl.subclass dt { ... }
.pseudo-class dl dd { ... }
.pseudo-class dl.subclass dd { ... }
.pseudo-class dl dd.img img { ... }
.pseudo-class dl.subclass dd.img img { ... }

I admit this last example is a little repetitive, but the overarching idea here is to reduce the bloat and make cleaner (and leaner) CSS that’s still self-contained but also easier to manage.

I floated this idea by Emrah a few weeks ago. He was encouraged by it, to be sure, but he also offered a healthy dose of reality, searching for more related proposals within the archives … and their responses:

Grouping Selectors (nearly the same concept)

An example comment

Macros for assigning bulk properties (sound familiar?)

An example comment

Bottom line: “… if one of the CSS draft editors reject it, the chances are low the proposal be accepted by the [CSS Working Group].”

Sigh.

Of course, now that I know there’s CSS SSC, I can always hope for “plan B.” In fact, I’d even welcome an Apache server-side module at this point. OK, ’nuff said. Discuss.

---