A Guide to the CSS Cascade

What a lot of people completely miss is that a deep and comprehensive understanding of the “cascade” part of CSS will make preprocessors like LESS and SASS almost completely functionally worthless.

Why? Because by utilizing the cascade correctly, _you don’t need preprocessors._

For example, one of the more prominent use cases of preprocessors encourages you to employ variables to add the same font colour 50 times to 50 different HTML elements. This needlessly bloats the CSS, leading to heavier server loads, fewer site visitors served, and slower rendering on web browsers; especially mobile and low-power devices. By using the cascade _correctly_, that colour needs to be defined _once_. As in, even in the final published product, there is only one `color` property in the entire css file. One. Not 50. One. Maybe two at most, if the design intentionally interrupts the cascade of the font colour at some point or if an accent colour is used.

If you truly want to get good at CSS, avoid preprocessors completely. IMO they exist purely to help less-skilled developers work around their ignorance and lack of refined skills with CSS. Preprocessors are a shortcut, they are empty calories, they are a crutch that will hobble and limit you. Preprocessors are worse than training wheels - they are wheelchairs for perfectly healthy people, and are equally as limiting.

How do I know this? I have been making web sites since the early 90s, and have been using CSS on a near-daily frequency since it was first supported by a web browser in 1996. That’s just shy of a quarter century’s experience building style sheets for sites of all sizes, clear up to corporate and enterprise-class sites serving up hundreds of thousands of web pages.

This article is a great first step. But for the sake of your web dev career, don’t let it be your only step. Go beyond the scratched surface to uncover the true power of the C in CSS.

Very well done and a nice explanation. Over the years I have just sort of inherently come to "know" these things but it was nice to read an explanation of the "why" aspect! Also thought the in-line quiz thing was on point.

Very nice guide, I wish the actual spec were laid out so clearly. (The spec isn't bad, it just doesn't have it all in one handy list like this).

The sidebar waterfall illustration was cool, and I liked that it didn't move when I scrolled so I could keep referencing it. That's useful.

The little inline quizzes were unexpected, but did help me double check that I was understanding the explanations.

Thank you, Amelia. This is beautiful and so well done. I especially like the in-line quizzes.

Wow, this much design and this less information?