想提升代码水平？教别人 CSS。

我的一位朋友最近请我教她编程。她是一个完全的初学者，对编程到底包含什么一无所知。我决定从我开始的地方开始：HTML 和 CSS。使用 CodePen，我们开始分叉笔并修改它们。很快，一条学习路径开始逐渐清晰。

本文的目的不是向已经了解 CSS 的人教授基础 CSS，而是突出那些启发新手的因素，并希望激励您在有机会时将一些知识传授给他人。帮助别人感觉很好，反过来，我也学到了一些非常宝贵的经验教训，这些教训改变了我思考代码的方式。双赢！

所以，我们开始吧：我从教别人 CSS 中学到的五个教训。

教训 1：不要从头开始

12 年前，当我开始为网页编写代码时，我从布局开始——使用浮动、边距、填充和位置声明进行定位。现在看来可能有点过时了，但我的新编码伙伴就是从这里开始的。

结果不太好。

正如你可能猜到的那样，从“这是如何在屏幕中央放置一个空框的方法”开始是一个错误。多么缺乏吸引力！尽管我对自己的能力印象深刻，可以演示 Flexbox 如何将元素放置在屏幕中央（稍后会详细介绍），但我立即面临了许多其他非位置问题。

“那颜色怎么改？”

“悬停时可以改变形状吗？”

“网页上可以使用哪些字体？”

我以为我们还要等几个星期才能学到这些。

所以，我教授 12 列网格的计划泡汤了，我们调出了 Chris 的命名颜色图表 以及几个分叉的笔，并开始尝试。首先，我们更改了 Cassidy Williams Netflix/Netlify 徽标 的颜色。哇！一击即中。

<a class="container" href="https://netlify.com" target="_blank"> 
  <div class="logo">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
  </div>
  <div class="name">Prettier</div>
</a>

然后对 CSS 进行了一些简单的调整

body {
  background: #F9F2DB;
  color: #092935;
  font-size: 50px;
}


a {
  color: #092935;
}


.logo .uno, .dos, .tres {
  background: #C61561;
}

.logo .dos {
  box-shadow: 0 0 20px #F9F2DB;
}

.logo::before {
  background: #F9F2DB;
}


.name {
  letter-spacing: 8px;
}

几分钟之内，我的朋友就被迷住了！没有令人厌烦的定位需要担心，只是一个清晰的例子，说明几行简单的代码如何将如此熟悉的事物变成完全不同的东西。

然后她意识到可以更改任何东西的颜色！我们在浏览器中加载了几个知名网站，并在几分钟内使用 DevTools 更改了一些文本和背景的颜色。任务完成！我的朋友被迷住了。

经验教训：不要担心尝试从头开始构建东西。玩玩现有的东西！

教训 2：注释

这不是我计划课程中想要讲的内容，但关于为什么 CSS 的某些部分以/*开头，以*/结尾的问题出现了，所以我们就讲了。

这个真的让我思考了自己的工作。我真的没有足够地注释我的代码。观察一个新的编码人员注释所有内容（我的意思是所有内容）提醒了我注释是多么有用，不仅对你自己有用，对更广泛的团队，甚至对未来的你也有用。（Sarah Drasner 在 这个主题上有一个很棒的演讲）。

事情是这样的：在那之前，我以为自己一直在非常勤奋地注释。然而，观察别人这样做让我意识到，我有多么多次查看一段代码（尤其是 JavaScript），并希望我在那里加了一两行来提醒自己我在做什么。一个 10 秒钟的任务可能会为我节省 5 分钟（甚至更多）的时间。这累积起来，现在是我正在努力改进的地方。

经验教训：多加注释。

教训 3：定位

我们从一些基本的 HTML 开始，老实说，我几乎立刻看到我朋友的眼睛开始发呆。当你无法立即看到它在做任何事情时（不像编辑预先编写的 CSS），它看起来真的很枯燥。但是，我们坚持了下来，并取得了成果。

相信我，不要一开始就用 1 像素边框定位空的 <div> 元素。你会非常快地失去你的观众。在里面放一张狗的照片——或者 Baby Yoda 或者披萨——只要不是一个空元素就行。

然后我们转向 Flexbox。实际上，我们一开始觉得 CSS Grid 有点太多了。我们简单地浏览了一下 CSS Grid，但是当阅读大量关于它的文章时，很明显，许多人假设读者已经熟悉 CSS，特别是 Flexbox。我的朋友决定从 Flexbox 开始。

我承认：我太习惯使用 UI 框架（尤其是 Bootstrap）了，以至于我很少自己用 Flexbox 写 CSS 进行定位。我知道它是如何工作的以及（大部分）声明，但我仍然很少自己写出来，即使在相对容易的情况下也是如此。教学让我思考了自己对 UI 框架的依赖。是的，它们毫无疑问非常棒，为我们的项目节省了大量时间，但我记得在最近的一个项目中使用了 Bootstrap，该项目本质上只有两页，可能根本不需要它！

经验教训：如果项目很小，并且要定位的元素数量最少，那么考虑放弃框架并从头开始编写代码！最终结果将更轻量级、更快速，并且更令人满意！

教训 4：排版

我喜欢排版。在过去的几年里，我很幸运地与优秀的设计师合作，这真的帮助我掌握了类型的细微差别。令人惊奇的是，像行高和字间距这样的更改如何真正帮助设计从普通提升到卓越。这是我想向我渴望学习的新学生灌输的东西。好吧，我本不必费心，因为（最初）唯一感兴趣的事情是更改字体，然后，对我来说至关重要的是，可供我们使用的字体数量之多。选择几乎是无限的，并且在过去的几年里，提供网络字体的服务和铸造厂激增，以至于任何事情都成为可能，而且速度很快，对加载时间的影响很小。

但设计师（以及像我这样的前端开发人员）就是这样：我们在字体选择方面可能有点狭隘。设计往往坚持使用来自相同服务的相同字体（Roboto 和 Open Sans 有人用吗？），因为我们知道它们易于实现并且有效。与一个新手一起探索字体迫使我超越旧的常用字体，尝试一些新事物。我现在正在寻找协同工作的新配对，并详细了解它们如何在屏幕上工作并影响设计的整体外观。简而言之，教别人关于排版的知识提高了我自己关于排版的学习，这可能停留在 2017 年左右。

经验教训：跟上排版的潮流。

教训 5. :hover 使一切变得有趣

到目前为止，事情进展顺利，但正如你可能想象的那样，事情仍然相当静态。在没有真正计划的情况下，我们偶然地在一个元素上添加了一个悬停效果，它立即让人着迷，就像第一次更改颜色一样！

悬停添加了交互并很容易给人留下深刻印象，这使得它们非常适合新手尝试。缩放对象，将框从正方形更改为圆形，隐藏内容——这些都是可以如此轻松完成的事情，因此悬停是新编码人员获得即时结果的理想方式。事情是这样的：“像这样‘玩耍’”会打开其他大门。“如果我只是这样做会怎么样？”这是我们许多人在日常工作中很少有机会问自己的问题。由于有明确的设计可供参考，因此很少有机会玩耍，同样很少有机会进行实验。

所以，这是最后的教训：留出时间玩耍。仅仅是被问到，“你怎么让这个东西那样做？”就迫使我学习新事物，了解 CSS 中的新内容，以及我可以在日常工作中汲取什么。实验（或者更好的是，玩耍）使我成为一名更好的设计师，我将继续这样做。

经验教训：留出时间玩耍。

结论

如果我教新手 CSS 的经历教会了我什么，那就是我很少再从头编写代码了。代码片段和自动完成功能为我节省了数小时的时间，但正是这些便利让我忘记了一些非常基础的东西。我应该知道的东西。通过教别人，即使只是偶尔花 15 分钟，我的编码能力通常都有所提高，我的视野也开阔了，能够接触到一些我可能不会考虑的新思路和技巧。

至于我的朋友？好吧，她在我们短暂的相处时间里就被 CSS 迷住了，现在她正在参加一个包含 HTML 的在线课程，现在她知道了 HTML 的强大功能，它似乎不再那么枯燥了！