作为JavaScript开发者，我们需要知道的东西非常多，而且每天都在增加。
有这么多不同的语言、工具和技术在争夺我们的时间和注意力，要搞清楚什么是优先事项是很困难的。我们应该在TypeScript方面做得更好吗？或许可以学习Svelte？我们将来还会写JS吗？"WebAssembly "这个东西是真的吗？
在我看来，如果我们真的想让我们的投资回报最大化，我们可以关注的最好的东西之一就是CSS。
这似乎是一个奇怪的选择，但说实话，更好地掌握CSS对我作为一个开发者的生活和职业产生了巨大影响。在这篇文章中，我将分享一些我认为这是一个好主意的原因。
预期的读者
这篇文章主要是为前端/全栈开发者写的，特别是为那些喜欢使用现代JavaScript框架（如React），但发现CSS令人困惑和沮丧的人们。
它能提高你的生活质量
在过去的几个月里，我与许多开发者交谈过，他们发现CSS很痛苦。我对此有一个假设。
CSS是一种非常隐含的语言；它在很大程度上依赖于深埋在CSS规范中的机制。当这些机制以我们意想不到的方式工作时，我们就被蒙在鼓里，不知道到底发生了什么。我们不知道我们不知道的东西。
与TypeScript这样的语言相比：当我们犯错时，会有一个有用的工具提示弹出来，让我们知道我们做错了什么。即使是在松散的JavaScript中，异常也会给我们指出正确的方向（另外我们还有提示、断点、日志...）。
当我们写代码时--在任何语言中--我们都依赖于我们对该语言如何工作的心理模型。如果我们的心理模型不完整或不正确，我们很有可能得不到我们所期望的结果。在CSS中，这些错位是非常常见的，因为CSS是隐性的。
让我们看一个简单的例子。
在CSS中，z-index 属性可以用来将一个元素移到另一个元素的上方或下方。在这个片段中，粉色方框位于灰色方框的前面，因为它的z-index值比较大。
<style>
.box {
position: relative;
}
.first.box {
z-index: 2;
background: hotpink;
}
.second.box {
z-index: 1;
margin-top: -20px;
margin-left: 20px;
}
</style>
<div class="container">
<div class="first box"></div>
</div>
<div class="second box"></div>
但是：在其他情况下，即使是看起来非常相似的情况，此规则似乎也会被打破。z 索引值没有更改，但现在粉红色框位于灰色框后面：
<style>
.box {
position: relative;
}
.first.box {
z-index: 2;
background: hotpink;
}
.second.box {
z-index: 1;
margin-top: -20px;
margin-left: 20px;
}
/*
👇🏻 This is the only difference
between the two snippets
*/
.container {
opacity: 0.9;
}
</style>
<div class="container">
<div class="first box"></div>
</div>
<div class="second box"></div>
就像CSS中经常出现的情况一样，z-index 属性的内容比我们看到的要多。
如果我们想了解浏览器是如何使用z-index值的，我们就需要了解堆叠上下文，这是一种控制如何使用这些值的隐含机制。
这很令人沮丧，因为它感觉是随机和不可预测的。这里面有一个 "俄罗斯轮盘赌 "的元素：每次我们使用z-index时，我们都希望它做我们所期望的事情。
需要强调的是：这不是你的错大多数教授CSS的资源都集中在表面的属性和 "整洁的技巧 "上，而不是更深入地学习诸如堆叠上下文的东西。
像z-index 或position 这样的属性被用作各种布局算法的输入。与其学习单个属性，不如学习这些算法的工作原理
当我们采取这种方法时，它对我们用CSS构建界面的能力产生了变革性影响。我们会发展出一种更强大、更可预测的直觉，我们对这门语言的信心也会膨胀。我们可以花上几个小时的时间，把一个设计变成一个响应性的、功能性的布局，因为我们知道我们可以解决任何出现的问题。
在过去的一年里，我与数百名JavaScript开发人员讨论过CSS。我注意到一个共同的主题：许多JS开发者觉得他们的大脑没有理解CSS的能力。他们认为CSS对其他人来说是自然而然的，而他们只是不适合做这个。
我向你保证，情况并非如此。没有人天生就具备CSS技能。你绝对可以熟练掌握CSS。
而且你应该这样做。在你已经精通HTML和JS的情况下，培养扎实的CSS技能是多么有力量，这一点怎么说都不过分。它完成了三位一体：你已经收集了所有的工具，现在你可以建立任何东西。✨
它可以帮助促进你的职业生涯
在网络开发界的某些小圈子里，有一种普遍的观念，即CSS技能不受雇主重视。如果你想得到那些高薪的工作，你的JS技能是最重要的，对吗？
的确，雇主们倾向于优先考虑JS技能，尤其是对于更高级的职位。但这里有一个有趣的动态。
雇主实际上需要擅长JS、CSS和HTML的开发人员。建立一个前端需要这三种技术。由于许多JS开发人员在他们的技能组合中都有一个 "CSS洞"，所以CSS技能往往供不应求。
有一个人告诉我，他在信中说他是一个初级工程师，刚得到第一份工作。他和一位高级工程师一起工作，这位高级工程师说："你怎么对Flexbox了解这么多？"......他对这个孩子印象很深，问他："你是怎么做到的？"
在职业生涯中脱颖而出并取得进步的最好方法之一是在相关领域中以高于平均水平而闻名。谈到JavaScript，其平均技能水平是相当高的，因为有这么多的开发者只关注它。与此同时，CSS的平均技能水平则要低一些*。
CSS与找工作
找工作的过程很糟糕。但我想也许它正在变得更好。
几年前，我经历了一个艰苦的8次面试过程。其中4个面试是技术性的，虽然我没有被问到关于React、Javascript、CSS或任何与网络开发有关的问题。它是 "破解编码面试 "类型的东西。算法和数据结构。当涉及到前端工作时，这些东西没有任何意义。*
庆幸的是，潮流似乎正在转向；越来越多的公司看到了光明，并试图在工作面试和招聘过程中模仿典型的日常工作。当我在Gatsby Inc（Gatsby.js框架背后的公司）面试时，我被要求建立一个模态/对话框组件。
模态是出了名的棘手的UI元素，尤其是当你注意到可用性和可访问性的时候。但有一点是肯定的：对CSS机制的扎实理解有很大的帮助。
在这篇文章的开头，我们看了几个代码片段，看到z-index ，似乎是不可预测的。因为我对堆叠上下文很熟悉，所以我能够将这些知识运用到我的解决方案中，并产生一个更好的模态。
明确地说，我并不是说单靠CSS就能获得高薪工作的门票。在那次面试中，我也被测试了很多其他技能，包括React和JavaScript。但是，如果你正在读这篇文章，我怀疑你已经相当熟练地掌握了JS及其现代框架和工具的生态系统。将CSS添加到该技能集中可以使你获得相当强大的竞争优势。
