How to explain the "Cascade" to CSS newbies?

Question

I have trouble explaining to people who are new to CSS how the cascade works when using stylesheets. For whatever reason, newbies seem to naturally start out by just adding a class to every element. Take the code snippet from this question, for instance (no offense to the OP, overtherainbow).

Doing this:      ul#nav { } and ul#nav li { }
Is better than: ul.nav { } and li.navLinks { }

That is a very basic example, but you get the point. Using inheritance in this case is clearly beneficial.

I have tried to use semantics as a reference point, but that has not proven to be effective. It is quite possible that the term "class" is intruiging/confusing due to prior knowledge of OOP. Eventually, after seeing good example after good example, they always have the breakthrough moment where they finally "get it". But, I am looking for a way to streamline this process, because I don't want to be the guy who has to go back and maintain this classitis by-product that slips into production.

I particularly enjoyed this answer that explains recursion. I had a similiar explanation when I was in school, and I "got it" immediately. I am hoping that somebody brilliant out there has a similiar way of explaining the cascade succintly but thoroughly.

Answer 1

Maybe you could start by ignoring id and class in the beginning. Just doing "stupid" things like addressing elements very specific according to the hierarchy. Then explaining grouping and labeling, and combine them?

Answer 2

You could try to have your pupils/students/those you teach try to create a somewhat advanced layout without using any class or ID-attributes.

A key point about the cascade is that you should utilize the DOM-tree a HTML-document is to its fullest. Also, a point of the cascade is that you can apply several styles to an element, so that its resulting style is style a + style b + style c.

Answer 3

for me .. its easy to understand a css when you read it from right to left like:

div#nav li:hover a

i'd translate it to:

FOR ALL "links" INSIDE A "li" THAT HAS hover THAT ARE INSIDE A div WITH id=nav DO THIS{ ....

Answer 4

It may help to describe and view the CSS Cascade as a hierarchy orthogonal to the DOM hierarchy. The two hierarchies meet at a display element. DOM gives the structural nesting, CSS gives the display attribute nesting. CSS is just the language used to describe a display attribute hierarchy.

The real difficulty in understanding the CSS Cascade is that it contains enough Rube Goldberg features to ruin any single unifying principle capable of "turning on the lights" for your students. There are always going to be a few WTF's between darkness and understanding.

The best description and explanation of the CSS cascade I can think of comes from www.w3.org Cascade. I simply recommend reading this over and over and over until the dimmer switch is pushed high enough to at least "see the light".

Start with a plain HTML document, add some simple CSS, figure out what happened and why, add something, figure it out, add something, figure it out... I can see the light.