CSS的过程中学到了五个教训

我的一个朋友最近要我教她编码。她是一个绝对的初学者，不知道编码真正涉及什么。我决定从我开始的地方开始：HTML和CSS。使用CodePen，我们开始分叉Pens并对其进行更改。很快，一条学习之路开始解开。

本文的目的不是向已经了解CSS的人讲授基础CSS，而是重点介绍那些启发了新手的东西，并希望在机会出现时能激发您将知识传播给其他人。帮助某人感觉很好，因此，我学到了一些非常有价值的课程，这些课程改变了我对代码的看法。双赢！

因此，我们开始：我从教CSS的过程中学到了五个教训。

第1课：不要从头开始

12年前，当我开始为Web编码时，我从布局开始-使用浮点，边距，填充和位置声明进行定位。这些天似乎已经过时了，但是仍然是我和新的编码伙伴一起去的地方。进行得并不顺利。您可能会猜到，从诸如“这里是如何在屏幕中间放置一个空白框”之类的内容开始，这是一个错误。太没意思了！即使我对展示Flexbox如何在屏幕中央放置元素的能力印象深刻（稍后会详细介绍），但我立即面临许多其他非位置问题。

“那么，如何改变颜色？”

“将鼠标悬停在上面可以改变形状吗？”

“您可以在网络上使用什么字体？

<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更改了某些文本和背景的颜色。 任务完成！ 我的朋友迷上了。

经验教训：不必担心尝试从头开始构建某些东西。 玩一玩吧！

第二课：评论

这不是我计划与计划的课程一起使用的地方，但是为什么CSS的某些部分以/ *开头并以* /结束的问题出现了，所以我们一起去了。

这真的让我考虑了自己的工作。我真的对我的代码评论不足。看着新的编码员评论一切（我的意思是一切），这不仅使我自己，而且对更广泛的团队，甚至对你的未来都是有益的。 （萨拉·德拉纳（Sarah Drasner）在这个话题上有精彩的演讲）。

这就是问题：在那之前，我还以为我在勤奋地评论。但是，看着别人这样做会让我意识到我看过一段代码（尤其是JavaScript）多少次，并希望我在其中放一两行来提醒自己自己在做什么。十秒钟的任务可能节省了我五分钟（甚至更多）的时间。这加起来，现在是我正在研究的东西。

获得的经验：评论更多。

第三课：定位

我们从一些基本的HTML开始，说实话，我几乎立即看到朋友的眼睛。当您看不到它立即执行任何操作时，它看起来是如此呆板（不同于编辑预编写的CSS）。但是，我们坚持下去，并取得了结果。

相信我，首先不要将空的<div>元素放置在具有1像素边框的周围。您会很快失去听众。只要其中没有空的元素，就可以在其中放上狗的照片，或者是婴儿Yoda或披萨。

然后，我们转向Flexbox。实际上，一开始我们发现CSS Grid太多了。我们简要介绍了CSS Grid，但是在阅读大量有关CSS Grid的文章时，很明显，很多人认为读者已经熟悉CSS，尤其是Flexbox。我的朋友决定从Flexbox开始。

我的观点是：我习惯于使用UI框架（尤其是Bootstrap），以至于我很少自己编写CSS在Flexbox中放置任何东西。我知道它是如何工作的，以及（大多数）声明，但是我仍然很少自己写出来，即使在相对容易的情况下也是如此。教学使我想到了我对整个UI框架的依赖。是的，它们无疑是惊人的，可以为我们节省大量的项目时间，但是我记得在最近的一个项目中使用Bootstrap的情况，该项目实际上只有两页，可能不需要它！

经验教训：如果项目很小，只需要放置最少的元素，那么请考虑从头开始放弃框架和代码！最终结果将是重量轻，速度快，并且更加令人满意！

第4课：排版

我喜欢排版。在过去的几年中，我很幸运能与优秀的设计师合作，这确实帮助我发挥了字体的细微差别。令人惊讶的是，对行高和字母间距等内容的更改如何真正帮助将设计从平均水平提高到惊人水平。这是我渴望给急切的新学生留下深刻印象的东西。好吧，我不必担心，因为唯一感兴趣的（最初是）是更改字体，然后对我来说至关重要的是，可供我们使用的字体数量众多。选择几乎是无限的，并且提供网络字体的服务和代工厂在过去几年中爆炸式增长，以至于一切皆有可能，而且速度对加载时间几乎没有影响。

但是，这是关于设计师（以及像我这样的前端开发人员）的问题：我们在字体选择上可能会有些狭narrow。设计倾向于使用来自相同服务（Roboto和Open Sans有人吗？）的相同字体，因为我们知道它们易于实现并且可以正常工作。与一个新手一起探索字体，使我不得不超越传统的钉书针，尝试一些新的东西。我现在正在寻找可以一起使用的新配对，并介绍它们在屏幕上的工作方式，并影响设计的整体外观。简而言之，教别人其他关于类型的知识改善了我自己的关于类型的旅程，这可能停留在像2017年这样的时代。

获得的经验：与时俱进。

第5课：悬停使一切变得有趣

到目前为止，一切都还可以，但是正如您可以想象的那样，事情仍然是静态的。如果没有真正的计划，我们就会绊倒在元素上添加悬停效果，这是一个即时钩子，就像它是第一次更改颜色一样！

悬停功能增加了互动性并易于留下深刻的印象，这使它们非常适合新手使用。缩放对象，将方框从正方形更改为圆形，隐藏内容-这些都是可以轻松完成的事情类型，悬停是新编码器获得即时结果的理想方式。这就是事情：像这样的“玩耍”打开了另一扇门。 “如果我只是这样做呢？”这是我们在日常工作中很少问自己的事情。使用确定的设计进行工作时，通常很少有机会玩游戏，而实验的机会也更少。