英文 | https://javascript.plainenglish.io/5-common-css-mistakes-that-you-need-to-avoid-53e51ed98d04

翻译 | 杨小二

1、不使用相对单位

/* 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 错误。我也犯了一些这样的错误。这就是为什么我想和你分享它们的原因，希望那些新的开发者不要再犯我之前犯过的一些错误。

最后，感谢你阅读这篇文章，希望你觉得它对你有用。

学习更多技能

请点击下方公众号