
A Guide to the CSS Cascade - wattenberger
https://wattenberger.com/blog/css-cascade
======
rekabis
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.

~~~
vcoelho
This is a very limited point of view. Unecessary repeated code is a problem
caused by inexperience, not by preprocessors.

They aren't training wheels, they are meant for advanced users who wants to
save time.

------
SavageBeast
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.

------
mekane8
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.

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

------
bureaucrat
Wow, this much design and this less information?

