英文 | https://javascript.plainenglish.io/5-common-css-mistakes-that-you-need-to-avoid-53e51ed98d04
翻译 | 杨小二
CSS 是每个 Web 开发人员必须掌握的技能，以便设计网页样式并使其具有响应性。我无法想象不使用 CSS 的网页会是什么样子。你可以用这种惊人的样式表语言做很多很酷的事情。
你只需要有点创意并避免代码中的错误。在 CSS 中很容易出错，因为你必须为网页上的每个元素设置样式。
今天，我将与分享5个介绍作为 Web 开发人员需要注意避免的一些常见 CSS 错误。
现在，让我们开始吧。
1、不使用相对单位
一个常见的错误，就是我看到很多新开发者提出的是，他们在开发时，使用px单位，而不使用相对单位（rem，%，em...）。
其实，使用相对单位，可以确保布局根据用户屏幕进行缩放。因此，我建议大家尽可能使用它们，尽量注意并避免在代码中的任何地方使用 px 单位。
不好的做法：
/* wrong */
element{
font-size: 18px;
margin: 10px;
line-height: 15px;
}
比较好的做法：
/* right */
element{
font-size: 1.2rem;
margin: 0.5rem;
line-height: 1.3em;
}
2、没有重置CSS
每个 Web 浏览器都有自己的默认样式。因此，当网页不包含 CSS 时，浏览器会为文本、填充、边距等添加一些基本的默认样式。
每个浏览器都有独特的默认样式，这就是为什么通过添加 CSS 重置样式来重置这些浏览器默认样式的原因。但是，许多开发人员并没有这样做。
我们通过添加 CSS 重置样式可以避免出现这个错误。
你可以通过使用通用选择器(*)重置边距、填充、框大小和文本字体来做到这一点。
像这样：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "your preferd font here";
}
3、 重复代码
许多开发人员在谈到 CSS 时都会重复自己的代码。这是一种不好的做法，因为你需要减少代码以使其具有高性能且易于管理。
因此，请始终寻找减少 CSS 并避免重复代码的方法。
下面是一个例子：
不好的做法：
/* wrong */
.container {
background-color: #000;
border-radius: 0.5rem;
}
.sidebar {
background-color: #000;
border-radius: 0.5rem;
}
好的做法：
/* right */
.container, .sidebar {
background-color: #000;
border-radius: 0.5rem;
}
4、不使用缩写
同样在 CSS 中，你可以使用缩写来编写更少的 CSS 代码。但是，许多开发人员不使用这些简写，或者他们甚至不知道它们。
这里有些例子：
不使用缩写（不友好的方式）：
element{
background-image: url(file.png);
background-repeat: no-repeat;
background-position: center;
}使用缩写（比较好方法）：
element{
background: url(file.png) no-repeat center;
}
这是另一个例子：
/* without shorthand */
element{
font-family: Helvetica;
font-size: 1rem;
font-weight: bold;
}
/* using a shorthand */
element{
font: bold 1rem Helvetica;
}
如你所见，缩写减少了 CSS 代码，这就是为什么，我推荐你尽可能多地使用它们的原因。
5、使用颜色名称
不要使用诸如red、blue等这样的颜色名称。相反，我建议你使用十六进制的颜色值来表示颜色。
为什么？因为当你使用颜色名称时，例如，red颜色在所有浏览器中看起来会完全不相同。你通过使用颜色名称red的话，那么就意味着你允许浏览器显示它认为是红色的颜色。
这就是为什么我建议使用十六进制颜色来表示，它可以更具体地选择你的颜色以在所有浏览器中看起来相同。
不好的方法：
/* wrong */
element{
color: blue;
}
好的办法：
/* correct */
element{
color: #2596be;
}
结论
如你所见，以上5点就是作为 Web 开发人员需要避免的一些 CSS 错误。我也犯了一些这样的错误。这就是为什么我想和你分享它们的原因，希望那些新的开发者不要再犯我之前犯过的一些错误。
最后，感谢你阅读这篇文章，希望你觉得它对你有用。
