The Cascade and Other Essential Unessentials

There was a poll posted the other day by Max on Twitter and it has lead to some fairly heated follow-up discussion (Developers being angry on Twitter? Shocking, I know.)

Max posted the following question:

Given these classes:

.red {
  color: red;
}

.blue {
  color: blue;
}

Which color would these divs be?

<div class="red blue">
<div class="blue red">

The correct answer is that they’re both blue. The order of class names in HTML has no bearing on the styles. In this case, both selectors have the same specificity (they’re both class selectors) so there’s a tie there. Since .blue comes later in the stylesheet, it overrides the .red selector. Both div’s will have text with the color blue.

Over 14,000 people have responded as of the time I’m writing this. 43% got the answer correct. Most folks got tripped up by the order of the HTML attributes.

It doesn’t bother me too much that people are getting the question wrong. Everyone is at different stages in their career and everyone has different problems they’re facing in their daily tasks, so sure, not everyone is going to know this yet.

I do find it a bit alarming just how many folks got it wrong though. Understanding how the cascade and specificity works is essential knowledge to being able to effectively use CSS—navigating the whole “cascading” part is going to be a huge mess otherwise. It’s clear from these results that we’re not doing a good enough job discussing and teaching these fundamental concepts. That’s on us—those of us who have learned these topics—for not effectively passing that information along.

But again, what really bothers me is not so much that people are getting the question wrong, but that some are presenting this kind of knowledge as a “quirk” or even as a topic that isn’t worth learning.

I couldn’t disagree more strongly with that and I think it’s doing a disservice to all the talented CSS developers out there (who often, understandably, already feel undervalued). It’s all too easy to disrespect someone’s work when we decide that what they do isn’t worth doing without even taking the time to understand it ourselves.

Take away specificity and you have to take away the cascade. Take away the cascade and…well, you’re simply not playing with all the tools available to you with CSS.

Quite a few folks were commenting about how this seems like a great argument for “CSS-in-JS”, because they can bypass these kinds of things altogether. It makes sense on some level I suppose. If I don’t have a good fundamental working knowledge of HTML, I would want to use a tool or framework that would generate it for me. If I don’t understand how to work directly with the DOM, I’d want to use a framework that would abstract that away from me. So yeah, if I don’t understand the cascading part about CSS, I would want a tool or approach that would let me bypass it.

Thinking about it in those terms puts it in perspective. I’ve definitely used tools, at times, that help me bypass the tricky parts of something I don’t fully understand otherwise. So I can’t begrudge someone using something they’re familar with to help them avoid something they’re not familar with, at least for a short while until they have a chance to better understand the technology they’re working with. But we have to be careful not to hide behind these tools either.

I have never once regretted taking the time to learn more about the tools that I use. Never. I always pick something up that makes me a better developer. The cascade is a wildly useful feature, and specificity is critical to being able to effectively use CSS. Learning these concepts is well worth the time spent.

So to anyone that didn’t get the question right, or wouldn’t know how to answer it: don’t feel bad but don’t avoid the topic either. It’s fundamental knowledge, one of those foundational concepts that makes your life as a front-end developer much easier. Yes—even if you are taking a styled components approach. MDN has some great resources about how CSS works. Estelle’s speciFISHity is another fantastic resource for learning how specificity comes into play.

To those of us who understand the topic, let’s consider what we can do to do a better job of explaining these core concepts to people who are less experienced with them.

And to those who find the topic complex or are adamant that this is a “quirk” that doesn’t need to be learned, don’t be so quick to dismiss it. The next time you come across a developer who works with CSS as a primary part of their day-to-day work, recognize that they’ve tackled a topic you find difficult. Sit down and pick their brain. They’ll probably be more than happy to help you learn more about a critical front-end skill, and that’s never time wasted.