我最愚蠢的 CSS 错误 PlatoBlockchain 数据智能。 垂直搜索。 哎。

我最愚蠢的 CSS 错误

我们都会在代码中犯错误。 它发生了! 我知道,如果我的办公桌上挂着一个“自上次错误以来的日子”标志,那么一个大鹅蛋就会一直在我头顶盘旋。 也不一定是大错误。 我笨拙的自己在 repos 中犯了一些小错误,从拼写错误一直到完整的 npm 模块目录。

呜呜呜。

这是我真正喜欢 CSS 的原因之一:它非常宽容。 如果它不理解拼写错误,它会继续查找级联以寻找匹配项。 没有一个不合适的角色会破坏站点并且没有俘虏的东西。 但是当 CSS 错误弹出时还是很尴尬!

就像这个一样,我发现自己做的次数比我想承认的要多:

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

或者当我尝试设置没有 background 属性:

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

我讨厌多么接近 XC 在键盘上,因为我数不清我经历了多少次错误和错误 px pc 单位。

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

我经常发现的另一个 CSS 错误是我知道许多其他人犯的一个错误,因为我经常在带有代码片段的博客文章中发现它:

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

你有没有忘记使用 var() 围绕一个 CSS 变量? 我肯定有。

.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 "" */
}

而且,是的,我花了太长时间才弄清楚这些报价是罪魁祸首。

看着最后一个提醒我,我有时会忘记设置 content 我工作时的财产 ::before or ::after. 这让我想起了我是如何忘记设置元素的 position 在试图抵消它或改变它之前 z-index. 严重的是,这些事情发生了!

谈论错误很难

你有没有读完一些分享一些惊人技巧的博客文章并感觉到某种冒名顶替综合症? 我认为这主要是因为博客文章经常掩盖真正的工作——和失败——进入惊人的技巧。 作为一个以阅读这样的帖子为生的人,我可以告诉你,即使不是绝大多数,也有很多人经历了多轮编辑,其中可能令人尴尬的错误被清除并消除了。

即使是那些非常棒的文章也必须失败才能得到所有这些 呜呜呜啊啊啊.

任何应用程序、网站、演示或您碰巧遇到的任何东西都是如此。 他们中的任何一个第一次出现完美的机会几乎没有。

但如果我对你完全诚实,我通常会更惊讶(和感兴趣) 旅程 它需要完成某事,疣和所有。 旅程是对它的一瞥 像前端开发人员一样思考. 这就是真正的(也是最有价值的)学习发生的地方。

而这一切都只是建立在我真正想问的问题上……

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

来吧,我们都知道你做了一些! 让我们向他们学习!

时间戳记:

更多来自 CSS技巧