5个常见的CSS错误，你一定要注意避免

Posted 2022-09-28

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

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