级联和非级联

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在Twitter上发布了一项民意调查，结果引起了一些相当激烈的后续讨论(开发人员对Twitter感到愤怒？我知道这令人震惊。)

Max posted the following question:

Max发布了以下问题：

Given these classes:

给定这些类：

.red {color: red;
}.blue {color: blue;
}

Which color would these divs be?

这些div是哪种颜色？

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

正确的答案是它们都是蓝色的。 HTML中类名称的顺序与样式无关。 在这种情况下，两个选择器都具有相同的特异性(它们都是类选择器)，因此存在联系。 由于.blue出现在样式表的后面，因此它将覆盖.red选择器。 两个div都将带有蓝色的文本。

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.

截至我撰写本文时，已有14,000多人做出了回应。 43％的人回答正确。 大多数人被HTML属性的顺序绊倒了。

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.

我确实发现这确实令人震惊，但有多少人弄错了。 理解级联和特定性的工作原理是有效使用CSS的基本知识-否则，导航整个“级联”部分将是一团糟。 从这些结果可以明显看出，我们在讨论和教授这些基本概念方面做得不够好。 这就是我们(已经学习了这些主题的我们当中的一部分)无法有效地传递信息的原因。

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.

我不能对此表示强烈反对，我认为这对所有有才华CSS开发人员都是有害的(可以理解的是，他们常常被低估了)。 当我们认为某人的工作不花时间自己理解就不值得去做时，不尊重他们的工作就太容易了。

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.

去除特异性，您必须去除级联。 取消级联，然后……嗯，您根本就没有使用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.

不少人评论说这对于“ CSS-in-JS”来说似乎是一个很好的论据，因为他们可以完全绕开这些事情。 我认为这在某种程度上是有道理的。 如果我不具备HTML的基本工作知识，那么我想使用可以为我生成HTML的工具或框架。 如果我不了解如何直接使用DOM，那么我想使用一个框架将其抽象化。 是的，如果我不了解有关CSS的层叠部分，我希望有一种工具或方法可以绕过它。

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.

我从来没有后悔花时间来学习更多关于我使用的工具。 决不。 我总是挑选一些使我成为更好的开发人员的东西。 级联是一个非常有用的功能，而特异性对于能够有效使用CSS至关重要。 学习这些概念非常值得。

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.

因此，对于没有正确回答或不知道如何回答问题的任何人：不要感到难过，但也不要回避这个话题。 这是基础知识，这些基础概念之一使您作为前端开发人员的生活更加轻松。 是的，即使您正在使用样式化的组件方法。 MDN拥有关于CSS如何工作的大量资源。 Estelle的专一性是另一个学习特异性如何发挥作用的绝佳资源。

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.

对于发现该主题很复杂或坚持认为这是不需要学习的“怪癖”的人，不要这么快就将其消除。 下次当您遇到一个使用CSS作为日常工作的主要部分的开发人员时，请认识到他们已经解决了您觉得很困难的主题。 坐下，捡起他们的大脑。 他们可能会很乐意帮助您更多地了解关键的前端技能，而这绝不会浪费时间。

翻译自: https://timkadlec.com/remembers/2018-09-10-the-cascade-and-other-essential-unessentials/

级联和非级联