I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

Why is not using the CSS cascade a problem?

When I announced I was going to write something for JavaScript developers who don't understand CSS, plenty of people (including Jeremy) said that the Cascading & Inheritance chapter would be crucial, since so many JS developers didn’t seem to understand it.

At first I agreed, but later I started to harbour some doubts, which is the reason I’m writing this piece.

As far as I can see, the problem is not that JavaScript developers do not understand the cascade, the problem is that they do not desire to use it. But is this really a problem?

Global scope

CSS only has a global scope. A button.primary rule affects all buttons with that class on the entire page. This is the strength of the cascade. In a recent project I spent half an hour with the designer defining a primary, secondary, and tertiary button/link class. That was time well-spent: both of us could drop buttons into the code from that time on, and their styles would just work.

JavaScripters have learned to dislike and distrust the global scope, however. Although this is an excellent idea in JavaScript, so the theory goes, it makes a lot less sense in CSS, since part of the strength of CSS is exactly its cascade-induced global scope. Therefore JavaScripters do not like CSS; see, for instance, CSS: the bad bits, which opens prominently with complaints about the global scope.

But don’t JavaScripters see the advantages of the CSS cascade? Aren’t they ignoring part of what makes CSS so powerful?

Local scope

Well, yes and no. To return to my earlier primary button example, it makes excellent sense in a relatively simple site like the one we were making. It starts making less sense when you want to drop not a single button, but an entire component, which might include a button, but needs the button style to conform to the component style. In that case you want to make sure that general styles don’t influence the component’s button. You want your CSS to be local in scope.

None of this is particularly surprising, and I have no doubt that my readers have figured this out for themselves and hit on the remarkable solution of using both global and local styles, depending on the exact nature of their project. As Charlie Owen said:

I hear people making out that scoped and cascade are incompatible. But using the cascade just means (to me) making use of the global aspects of CSS. Set your default block level margins, your typography, etc high up. Then each component can scope anything extra.

So far so good. This, as far as I can see, is the correct solution to the problem.

What’s the problem?

But what am I to make of the complaints about JavaScripters not understanding the cascade? I think they understand it perfectly fine; they just decide not to use it.

So I don’t think there’s really a problem here. Still, I decided to write this piece and ask this question because I might overlook something.

So what’s the problem with JavaScript developers and the cascade beyond them overlooking some use cases for global styles, wrapped up as they are in making everything local? Could someone please explain?

Thanks.