你应该避免这 7 个 CSS 禁忌！☝️

1. 风格重置

2. 不合适的类名

3. 重要关键词

4. 空选择器

5. 覆盖样式

6. 绝对定位过多

7. 太多 CSS

结论

更新版本已发布（点击）！ 🔥

人们一遍又一遍地阅读 CSS 技巧，以及为了尽快创建精美网站必须考虑的事项。有时，看看那些不好的例子，能帮你了解什么是真正的好。而这些 CSS 禁忌，你就可以在这里找到！

重要提示：以下“禁忌”仅代表我个人对“糟糕” CSS 的看法。这些并非固定规则，只是我根据自身经验总结的技巧！

1. 风格重置

每个 HTML 元素都有一些默认样式，这些样式应该使元素独一无二。这也决定了元素的应用范围或用途。因此，您应该使用这些默认样式，而不是重置它们。以p标签为例，这个问题可以得到很好的解释。

/* No-Go */

/* Default Style */
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

/* Wrong: Our custom Style */
p {
  display: inline-block;
  margin: 0;
}

我们会覆盖默认的display和margin属性。这里span元素更合适，因为它默认没有样式。

这样做会更好：

/* Correct: Our custom Style */
span {
  display: inline-block;
  margin: 0;
}

当然，我们必须调整许多元素的样式，有时甚至要覆盖它们，因为否则它们将与企业设计 (CD) 不匹配，导致每个页面看起来都一样。不过，您可以稍微注意一下。这可以节省 CSS 代码，从而节省页面加载的宝贵时间。

您可以在此处找到所有 HTML 标签的默认样式列表。

2. 不合适的类名

如果你希望其他开发人员自定义代码，那么这个“禁止”至关重要。与精心选择的注释类似，类名是确保代码可读性的重要一步。

在这一点上，我们必须区分三种错误。

2.1 太短——毫无意义

如果类名太短，通常就没什么意义了。我们能用 f 做什么呢？没错：什么也做不了！因此，务必选择一个有意义的类名，并尽量使用尽可能多的辅助类。你不应该这样做：

/* No-Go */

.f {
  color: red;
}
.a {
  margin: 1rem 3rem 2rem 3rem;
}
.cf {
  display: none;
}

有意义的辅助类看起来是这样的：

.red-color {
  color: red;
}
.margin-small-big {
  margin: 1rem 3rem 2rem 3rem;
}
.display-none {
  display: none;
}

2.2 与 HTML 标签相同

这些类名虽然可以理解，但却完全是多余的。我们已经可以通过元素名称 section 或 span 来选择 HTML 元素，不需要再添加一个同名的类名。以下代码是不行的：

/* No-Go */

section.section {
  min-height: 80vh;
}
span.span {
  color: red;
  font-size: 12px;
}

那就更好了：

section {
  min-height: 80vh;
}
span {
  color: red;
  font-size: 12px;
}

2.3 令人困惑

令人困惑的类名是最糟糕的。如果我在代码中看到 no-margin，我也会假设 CSS 中的边距设置为零。同样，对于 color-red，每个人都会假设背景颜色或字体颜色设置为红色。它不应该看起来像这样：

/* No-Go */

p.color-red {
  color: green;
}
.no-margin {
  margin: 3rem 0.5rem;
}

不会混淆的类名可能看起来像这样：

p.color-green {
  color: green;
}
.margin-big-small {
  margin: 3rem 0.5rem;
}

3. 重要关键词

我们都知道：有些样式无法更改，因为它经常被覆盖或来自插件。所以我们喜欢在 CSS 中使用!important这个神奇的词。

这会导致这种样式始终适用，问题似乎得到了解决。但这却是一个恶性循环的开始。下次你想修改它，却懒得再搜索时，你又会再次使用这个关键字，有时情况会变得一片混乱。

因此，在使用关键词之前，务必仔细思考并仔细搜索。有时这种情况不可避免，但更多时候可以通过其他方式解决。

这就是为什么我不想这样做：

/* No-Go */

span.foobar {
  color: red!important;
  margin-top: 4rem!important;
  font-size: 12px!important;
  border-bottom: 1px solid #000!important;
}

4. 空选择器

在所有 CSS 禁忌中，这可能是最不重要的，但同时也是最容易避免的禁忌。

我们讨论的是空选择器。换句话说，就是不包含任何属性的选择器。这些选择器总是会丢失一些字节的内存。

如果这种情况经常发生在代码中，并且我们有很多大型 CSS 文件，则会影响页面的加载时间。

这就是为什么 CSS 中不会丢失任何内容：

/* No-Go */

p { }
span { }
.no-margin { }
footer { }
footer > a { }

5. 覆盖样式

我们已经讨论过关键字“!important”。它允许我们覆盖样式，以便始终应用此 CSS 规则。如果我们过于频繁地使用它，以后的修改可能会带来很大的问题。但即使没有这个关键字，我们也应该尽量避免覆盖。

你应该避免这样的情况：

/* No-Go*/

p {
  font-size: 2em;
  color: #FFF;
}

/* ..other code.. */

p {
  font-size: 2.2em;
  line-height: 20px;
}

/* ..other code.. */

p {
  font-size: 1.8em;
}

但你可以轻松避免这个错误。不必总是添加新样式，只需在 CSS 文件中按 CTRL + F 键搜索并进行相应的更改即可。

这节省了我们的代码，从而节省了存储空间，并且文件也更加清晰。

它可能看起来像这样：

p {
  font-size: 1.8em;
}

6. 绝对定位过多

我喜欢绝对定位。它在很多情况下非常有用，而且在某些情况下也是不可避免的，而且很有用。

然而，实际上仍然有人对每个元素进行绝对定位。有很多理由说明你不应该这样做。一方面，逐个像素地定位每个元素要困难得多。需要大量的文书工作、反复的尝试，而且看起来不太干净。

让页面响应式显示也更加困难，你必须插入大量断点才能让页面在任何分辨率下都显示良好。何必让自己的生活变得更艰难呢……？不过正如我所说：绝对定位也有很多不错的应用。

7. 太多 CSS

我发现一个问题，比如预制的WordPress主题。你已经有大量的 CSS 代码（当然也有很多不必要的代码），然后你甚至还添加了自己的代码。所以，混乱已经达到了顶峰。

这正是许多列出的禁忌之处。覆盖、空选择器、频繁使用“!important”，最重要的是：令人困惑！因此，你应该直接删除或重写所有不需要或你修改的代码。

但对于其他项目，你也应该编写最少的代码。这会让很多事情变得更容易，而且极简主义现在既时尚又美观。

结论

所以，为了编写清晰高效的 CSS，你可以考虑很多方面。学习永无止境，你总能改进你的“代码”。我也知道你无法完全避免这些 CSS 禁忌，但你总能尝试提升自己。

如果您正在寻找 JavaScript 挑战，请查看此内容（抱歉，广告有点多）：

感谢阅读！如果你喜欢这篇文章，请告诉我并分享！如果你感兴趣，可以看看我的博客，并在推特上关注我！😊