My Deal with CSS query engines

I was perusing Zakas’ blog and came across a post where he wonders aloud at the proliferation of CSS query engines in javascript and why the need for them. His point is that they are innefficient and can easily be replaced using standard getElementById/getElementByTagName or perhaps by XPath queries. All of which is true and I fully agree with. I find myself generally aligned with Zakas on topics like these because he too seems to be a builder more than an integrator.

But I was thinking about it and reading through the replies. A lot of the defense of CSS querying comes from a point of view where many people are familiar with CSS and thus it’s something easy for them to use, they don’t need to learn XPath or don’t need to learn deeper DOM scripting. Which is the first thing I thought of as a defense. But there was still something nagging at me and I finally figured it out - I think a real reason that CSS querying is valuable is that your documents are structured and built by using CSS. So in a very real way, CSS maps directly onto the structure of your document and so when you are trying to access certain items they will often be the same items that you are styling in a particular way. So you can obviously map that desire using the more fundamental tools but using CSS querying represents a more accurate picture of what you are trying to do. This leaves your code more clear and matches your javascript up with your CSS.

I think he gives some of it away when he says this:

CSS queries also seem really inefficient and not very logical when compared to XPath queries, which is my favored DOM querying language (actually, I wish I could write style sheets to use XPath). [...cut...] I’ve never had any use for queries looking for elements with a given class name, or ones that want to find all descendant nodes of a given one, or any other thing that CSS querying claims to offer over using the provided DOM methods. If I need explicit access to an element, I give it an ID, or if I need to access a series of elements, I group them under a container and give that element an ID.

There’s a couple thoughts here - writing stylesheets in XPath would be great not just because XPath is more logical logical but because it would align javascript and CSS into a single language - so you have a single “search” language to access elements in your document. And then he later discusses his techniques for adding classes or containers with ID’s to access elements, the question is, if he was already styling them using CSS - would he have needed to add those extra classes and containers if he was using CSS querying?

To give a nerdy example, if you have built your model in cartesian space you could then also access those elements using polar coordinates but that probably won’t be as clear. To be honest, I don’t have a ton of experience using CSS querying having just started playing around with jQuery but intuitively when I was playing around with it, I believe that made a ton of sense to me.

Feb 18th, 2007 · Comments RSS · · · · · Tags: feature · javascript