CSS 代码异味

我们每周（大约）都会发布 时事通讯，其中包含关于网页设计和开发的最佳链接、提示和技巧。 最后，我们通常会写一些我们在本周学到的东西。 这可能与 CSS 或前端开发完全无关，但分享起来很有趣。 这是一个来自时事通讯的此类内容段落的示例，其中我漫谈代码质量，并深入探讨我认为在 CSS 语言中应被视为代码异味的内容。

---

许多开发人员抱怨 CSS。 级联！ 奇怪的属性名称！ 垂直对齐！ 这门语言有很多奇怪的地方，特别是如果您更熟悉 JavaScript 或 Ruby 等编程语言。

但是，我认为 CSS 语言的真正问题在于它 简单但不易。 我的意思是，学习如何编写 CSS 不需要太多时间，但编写“好的”CSS 需要付出非凡的努力。 在一两周内，您可能就能记住所有属性和值，并在浏览器中创建真正漂亮的网页设计，无需任何插件或依赖项，从而让所有朋友都惊叹不已。 但这不是我所说的“好的 CSS”。

为了定义什么是好的 CSS，我最近一直在思考如何首先识别什么是坏的 CSS。 在编程的其他领域，开发人员在描述糟糕代码时倾向于谈论代码异味；程序中的提示表明，嘿，也许您编写的这个东西不是一个好主意。 它可能是一些简单的东西，比如命名约定或一段特别脆弱的代码。

类似地，下面是我自己列出的 代码异味，我认为这些代码异味将有助于我们识别不良设计和 CSS。 请注意，这些要点与我在构建复杂应用程序中的大型设计系统方面的经验有关，因此请谨慎参考。

代码异味 #1：您编写 CSS 的事实

一个大型团队可能已经有一套工具和系统来创建按钮或样式以移动布局中的元素，因此您即将编写 CSS 的简单事实可能是一个坏主意。 如果您只是要为特定的极端情况编写自定义 CSS，那么请停止！ 您可能需要执行以下操作之一

1. 了解当前系统的运作方式以及它为何具有这些约束条件，并坚持这些约束条件
2. 重新思考 CSS 的底层基础架构

我认为这种方法在这里得到了完美的描述

关于“快速修复”的虚假速度。 pic.twitter.com/91jauLyEJ3

— Pete Lacey (@chopeh) 2017年11月2日

代码异味 #2：文件名和命名约定

假设您需要为您的应用程序创建一个支持页面。 您可能首先要做的是创建一个名为 `support.scss` 的 CSS 文件，并开始编写如下代码

.support {
  background-color: #efefef;
  max-width: 600px;
  border: 2px solid #bbb;
}

因此，这里的问题不一定是样式本身，而是“支持页面”的概念本身。 当我们编写 CSS 时，我们需要以更大的抽象思维来思考——我们需要以模板或组件来思考，而不是用户需要在页面上看到的特定内容。 通过这种方式，我们可以一遍又一遍地在每个页面上重复使用诸如“卡片”之类的元素，包括支持页面上我们需要的那一个实例

.card {
  background-color: #efefef;
  max-width: 600px;
  border: 2px solid #bbb;
}

这已经好多了！（我的下一个问题将是什么是卡片，卡片内部可以包含哪些内容，什么时候不能使用卡片等等——这些问题可能会挑战设计并让您保持专注。）

代码异味 #3：设置 HTML 元素的样式

以我的经验，设置 HTML 元素（如 section 或 paragraph 标签）的样式几乎总是意味着我们正在编写一个 hack。 只有在以下一种情况下才适合直接设置 HTML 元素的样式

section { display: block; }
figure { margin-bottom: 20px; }

那就是在应用程序的全局所谓的 “重置样式”中。 否则，我们将使我们的代码库支离破碎，难以调试，因为我们不知道这些样式是出于特定目的的 hack，还是定义了该 HTML 元素的默认值。

代码异味 #4：缩进代码

缩进 Sass 代码，使子组件位于父元素内，几乎总是代码异味，并且是该设计需要重构的明确标志。 以下是一个示例

.card {
  display: flex;
  
  .header {
    font-size: 21px;
  }
}

在这个例子中，我们是在说您只能在 .card 内使用 .header 类吗？ 或者我们是否在代码库的其他某个深处覆盖了另一个 CSS 块？ 我们甚至不得不提出这样的问题，这表明了这里最大的问题：我们现在在代码库中播下了怀疑的种子。 为了真正理解这段代码是如何工作的，我必须了解其他代码片段。 而且，如果我必须问关于这段代码为何存在或如何工作的问题，那么它可能要么过于复杂，要么对未来来说难以维护。

这导致了第五个代码异味……

代码异味 #5：覆盖 CSS

在理想情况下，我们有一个重置 CSS 文件，它为我们所有的默认元素设置样式，然后我们为应用程序中的每个按钮、表单输入和组件创建单独的 CSS 文件。 我们的代码最多应该被级联覆盖一次。 首先，这使得我们的整体代码更具可预测性，其次，使我们的组件代码（如 button.scss）超级易读。 我们现在知道，如果我们需要修复某些东西，我们可以打开一个文件，这些更改将在整个应用程序中一举复制。 在 CSS 中，可预测性是一切。

在同一个 CSS 理想国中，我们可能会通过类似 CSS 模块 的东西来阻止覆盖某些类名。 这样我们就不会意外出错。

代码异味 #6：CSS 文件包含超过 50 行代码

您编写的 CSS 越多，代码库就越复杂和脆弱。 因此，每当我的 CSS 代码达到大约 50 行时，我都会重新思考我的设计，并问自己几个问题。 从以下问题开始和结束：“这是否是一个单独的组件，或者我们可以将其分解成独立工作的单独部分？”

这是一个既困难又耗时的过程，需要不断练习，但它会导致一个可靠的代码库，并训练您编写真正优秀的 CSS。

总结

我想我现在还有另一个问题，但这次是问您的：您认为 CSS 中的代码异味是什么？ 什么是糟糕的 CSS？ 什么是真正好的 CSS？ 确保在下面添加评论！