我最愚蠢的 CSS 错误

我们都会在代码中犯错。这是不可避免的！我知道如果我在办公桌上挂着一个“上次犯错至今的天数”牌子，一个大大的鸭蛋会一直悬挂在我头顶。也不一定是大错误。我笨拙的自己犯过各种小错误，从拼写错误到完整的 npm 模块目录，应有尽有。

哎哟喂。

这就是我非常喜欢 CSS 的原因之一：它非常宽容。如果它不理解拼写错误，它会继续向上查找级联，直到找到匹配项。没有那种一个字符错位就会破坏整个网站并毫不留情地吞噬所有东西的情况。但 CSS 错误出现时还是会让人尴尬的！

就像这个错误，我发现自己比我想承认的次数还要多地犯了它

.element {
  display: flexbox; /* 🤦‍♂️ */
}

或者当我尝试设置渐变却没有使用 background 属性时

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

我讨厌键盘上 X 和 C 的距离如此之近，因为我无法计算自己有多少次在快速操作时将 px 误写为 pc 单位。

.element {
  font-size: 16pc; /* I meant pixels! */
}

我经常遇到的另一个 CSS 错误，也是我知道许多其他人会犯的错误，因为我在博客文章的代码片段中经常看到它

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

你有没有忘记在 CSS 变量周围使用 var()？我当然犯过。

.element {
  color: --primary-color;
}

说到 CSS 变量，给它们命名很难（就像其他一切一样），我经常使用一些我命名的变量的错误版本！

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

是的，我确实曾经复制过一段 CSS 代码，结果却发现花括号阻碍了它的正常工作

.element::before {
  content: “”; /* Should be "" */
}

而且，是的，我花了很多时间才意识到花括号就是罪魁祸首。

看到最后那个，让我想起我有时会忘记在使用 ::before 或 ::after 时设置 content 属性。这又让我想起我曾经忘记在尝试偏移元素或更改其 z-index 之前设置元素的 position 属性。真的，这些事情确实会发生！

说这些错误很难

你有没有读完一篇分享一些神奇技巧的博客文章后，感到一些冒名顶替综合征？我认为这在很大程度上是因为博客文章通常会掩盖实现这些神奇技巧背后的真正工作和失败。作为一名以阅读这类文章为生的人，我可以告诉你，很多文章，如果不是绝大多数，都要经过多轮编辑，才能剔除掉可能令人尴尬的错误并将其润色。

即使是那些超级棒的文章，也要在获得所有哇哦和啊哈之前经历失败。

任何应用程序、网站、演示或你遇到的任何东西都是如此。它们第一次就完美无缺的可能性微乎其微。

但如果我要对你坦诚相待，我经常会被实现某件事所经历的旅程（包括所有瑕疵）所吸引（和感兴趣）。这段旅程让我们得以一窥像前端开发人员一样思考的感觉。这是真正（也是最有价值）的学习发生的地方。

而这一切只是为了引出我真正想问的问题……

你最愚蠢的 CSS 错误是什么？

来吧，我们都知道你犯过一些！让我们从中学到东西！