为什么大多数开发人员害怕 CSS

我刚开始工作的时候，团队里只有两个前端开发人员，一个是我，另一个是高级前端开发人员。后来，高级前端开发人员辞职了，团队里就只剩我一个人了。一切都还好，我完成了我的工作，也没有什么损失。我们参加了一些面试，但都没有找到合适的人选。时间流逝，我突然意识到：我是唯一一个了解前端的人。巴士系数是1，在这种情况下，这可不是什么好事。为什么？如果我被巴士撞了，项目就会陷入困境。

然后我和老板谈了谈，我们达成一致，我们每个人都应该负责前端。这项工作可以结对编程，至少在我们找到合适的人选之前是这样。我觉得这是个好主意。我之前一直独自在前端工作，感觉筋疲力尽了。

我们随后提出了这个想法，其他开发人员首先表现出的恐惧，主要是因为 CSS 的问题。

HTML 和 CSS 是给失败者用的🙄我们都应该使用 Microsoft Word。

- 史蒂芬 (@mrsteffenp) 2019 年 6 月 8 日

为什么开发人员害怕 CSS？

我和其他开发者聊了聊他们为什么害怕 CSS。他们首先提到的就是层叠 😵 如果他们修改了一个类，会影响到其他五百个元素怎么办？

接下来提到的是浏览器的支持💻如果他们实现了某些浏览器不支持的东西怎么办？

最后一件事是从头开始构建一些东西🏡如果他们制造的东西不坚固而且看起来也不好看怎么办？

层叠😵

这是最大的担忧之一。当其他开发者谈论这个问题时，我猜他们谈论的是很多方面。这既包括重要性、特异性、源顺序，也包括属性如何从不同的规则继承。样式可以在许多不同的地方指定，并且可以以复杂的方式交互。这就是 CSS 如此强大的原因，但也是它容易让人困惑和难以理解的原因。如果你不了解选择器如何覆盖其他选择器的规则，那么级联可能是一件非常棘手的事情。

重要性

这是一个经常被讨论的话题。我们都知道，（在大多数情况下）使用这个小帮手是不对的。这是因为它!important总是会赢🏆

特异性

特异性本质上是衡量选择器具体程度的标准。例如，内联样式是最具体的，然后是#id，然后是.class，最后是element。从这些方面来看，特异性可以用无数种不同的方式进行衡量。如果您有疑问，可以使用特异性计算器。

源顺序

源代码顺序的本质是，后面的规则优先于前面的规则。如果你写了一个包含属性和值的选择器，然后又写了同一个包含相同属性但值不同的选择器。会发生什么？🤓

遗产

CSS 中的继承既简单又棘手。可以这样解释：应用于元素的某些属性值会被该元素的子元素继承，而有些则不会。听起来是不是很棒？😵 CSS 属性（例如font-size和 ）color会继承，而属性（例如margin和 ）则padding不会继承。我想你在这方面需要运用常识。如果margin会被继承，那会造成很大的混乱！你可以参考MDN。

浏览器支持💻

除非你的客户是一家仅支持 Internet Explorer 6 的公司，否则你不必太担心。大多数用户都在使用对 CSS 有良好支持的现代浏览器。如果你不确定是否应该使用某个特定属性，可以查看caniuse。如果浏览器不支持该属性，但你确实想使用它，那么大多数浏览器都支持@supports同名的 CSS @ 规则。这样你就可以制定一个后备解决方案。

@supports (display: grid) {
  div {
    display: grid;
  }
}

从头开始构建一些东西🏡

这主要关乎设计师和开发者之间的沟通。沟通并不总是那么顺畅。有时，设计师的期望值可能过高，远超公司的经济能力和开发者的技能——或者说，实际可能性有限。

重点在于，作为开发人员，我们应该更加融入设计过程，这样我们才能对最终结果感到满意。也就是说，如果开发人员对设计感到满意，那么从头开始构建就会更容易。

我希望这不是胡扯。我只是想告诉其他开发者，CSS 的日常使用并不适用，CSS 不是魔法 ✨

感谢您的时间！

如果您喜欢这个，那么请❤️并在 Twitter 上关注我。