想在代码方面变得更好吗？教某人CSS。

最近，一位朋友向我寻求编程指导。她是一位绝对的初学者，对编程一无所知。我决定从我自己的起点开始：HTML和CSS。我们使用CodePen，开始复制并修改现有的代码片段。很快，一条学习路径便清晰地展现在我们面前。

这篇文章的目的并非向已掌握CSS基础知识的读者教授CSS基础，而是重点介绍那些激发初学者学习热情的内容，并希望能激励你在有机会时将知识传授给他人。帮助他人让我感到很欣慰，而反过来，我也学到了一些宝贵的经验，这些经验改变了我思考代码的方式。双赢！

以下是教授他人CSS后我获得的五个经验教训：

教训1：不要从零开始

12年前，当我开始学习网页编程时，我从布局开始——使用浮动、边距、填充和位置声明进行定位。如今这可能看起来有些过时，但这就是我当时和我这位新的编程伙伴一起开始的地方。

结果并不理想。

正如你可能猜到的那样，从“这是如何在屏幕中央定位一个空盒子”开始是一个错误。多么枯燥乏味！尽管我对自己的能力印象深刻，能够演示Flexbox如何将元素定位在屏幕中央（稍后详细介绍），但我立即面临许多与位置无关的其他问题。

“那么如何更改颜色？”

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

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

我以为我们还需要几周时间才能学习到这些。

因此，我教授12列网格的计划被搁置了，我们调出了Chris的命名颜色表以及几个复制的代码片段，并开始尝试。首先，我们更改了Cassidy Williams Netflix/Netlify标志的颜色。哇！瞬间吸引了她的注意力。

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>Prettier</div>
</a></code>

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

<code>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;
}</code>

几分钟之内，我的朋友就被迷住了！没有枯燥的定位需要担心，只是一些简单的代码行就能将熟悉的事物变成完全不同的东西。

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

经验教训：不要担心尝试从零开始构建。尝试使用现有的资源！

教训2：注释

这并非我计划课程中的一部分，但关于为什么某些CSS部分以/开头并以/结尾的问题出现了，所以我们讨论了这个问题。

这让我开始思考自己的工作。我真的没有写足够的代码注释。观察一位新的程序员注释所有内容（我的意思是所有内容）让我意识到注释有多么有用，不仅对你自己有用，对更广泛的团队，甚至未来的你也很有用。（Sarah Drasner对此主题有一个精彩的演讲）。

事情是这样的：在此之前，我认为自己已经相当勤奋地编写注释了。然而，观察别人这样做让我意识到，我多少次查看一段代码（特别是JavaScript），并希望我在那里加一两行来提醒自己当时在做什么。一个十秒钟的任务可能会为我节省五分钟（甚至更多）的时间。这累积起来，现在是我正在努力改进的地方。

经验教训：多写注释。

教训3：定位

我们从一些基本的HTML开始，老实说，我看到我朋友的眼睛几乎立刻就失去了光彩。（不像编辑预先编写的CSS那样）当你无法立即看到它起作用时，它看起来太枯燥了。然而，我们坚持了下来，并取得了成果。

相信我，不要从使用1像素边框围绕空

元素进行定位开始。你会很快失去听众的注意力。放一张狗的照片——或者尤达宝宝或披萨——只要不是空元素就行。然后我们转向Flexbox。一开始，我们发现CSS Grid有点太多了。我们简要地查看了CSS Grid，但是当阅读大量关于它的文章时，很明显，许多人假设读者已经熟悉CSS，特别是Flexbox。我的朋友决定从Flexbox开始。

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

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

教训4：排版

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

但关于设计师（以及像我这样的前端开发人员）的事情是这样的：我们在字体选择方面可能有点狭隘。设计倾向于坚持使用相同服务的相同字体（Roboto和Open Sans吗？），因为我们知道它们易于实现并且有效。与一位新手探索字体迫使我超越旧的标准并尝试一些新事物。我现在正在寻找新的组合，并调整它们在屏幕上的工作方式以及对设计整体外观和感觉的影响。简而言之，教别人关于排版的事情已经改善了我自己的排版历程，这可能卡在了2017年左右。

经验教训：跟上排版的最新动态。

教训5：:hover让一切变得有趣

到目前为止，一切进展顺利，但正如你可能想象的那样，事情仍然相当静态。在没有真正计划的情况下，我们偶然添加了元素的悬停效果，这立刻吸引了她的注意力，就像第一次更改颜色一样！

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

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

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

结论

如果我教新手CSS的时间教会了我任何东西，那就是我很少再从头开始编写代码了。代码片段和自动完成为我节省了数小时的时间，但正是这些便利让我忘记了一些非常基本的东西。我应该知道的东西。通过教别人，即使只是偶尔花15分钟的时间，我的编码总体上也得到了改进，我的视野也对以前可能没有考虑过的新想法和技术敞开了。

至于我的朋友？好吧，在我们在一起的短时间内，她对CSS如此着迷，以至于她现在正在参加一个包括HTML的在线课程，现在她知道HTML能够做什么之后，它似乎并不那么枯燥了！

以上是想在代码方面变得更好吗？教某人CSS。的详细内容。更多信息请关注PHP中文网其他相关文章！