一些最常见和最有趣的CSS错误-技术圈

当我们非常专注于处理Web项目时，我们往往会忘记或犯一些可能导致无效CSS代码的错误。我喜欢称这些“潜意识错误”。导致我们问自己的那种错误：“糟糕，我为什么要这样做？”而解决它们并不需要花费很多时间，只要您第一时间发现它们即可。

我在Twitter上询问了前端开发人员可能犯的最有趣的错误，并且得到了一些有趣的答复。

您经常做的最有趣的CSS错误是什么？

我的字体太粗了。😂

你呢？pic.twitter.com/XUV44Re6Fm
-艾哈迈德·谢德（@ shadeed9）2020年8月9日

在本文中，我将介绍我们在潜意识中遇到的一些最常见和最有趣的CSS错误。

我做的错误

不透明度

我不完全知道原因，但有时我会忘记不透明度值的百分比。

.title {
    opacity: 50;
}

另一个常见的问题是使该opacity物业蒙混过关。

.title {
    /* It's not easy to spot this */
    opaciy: 0.5;
}

字体粗细

是light还是lighter？

.title {
    font-weight: light;
}

填充

当您认为该属性为padding，而实际上为时，可能会发生这种情况padding-top。

.section {
    padding-top: 10px 20px;
}

CSS网格

有时，我输入grid-column而不是grid-template-columns。

.section {
    grid-columns: 1fr 1fr 1fr;
}

CSS变量

我不是为什么，但是我发现我懒得写var(--brand-color)。

.title {
    color: --brand-color;
}

盒子阴影

我总是忘记box-shadow应该使用来重置none。

.title {
    /* Invalid */
    box-shadow: 0;
}

艾哈迈德·霍斯纳（Ahmed Hosna）也提到

来自社区

能见度

来自大利利夫尼

.title {
    visibility: none;
}

宽度

我无法数出这样做的次数，这让我想起了Sublime Text。

来自bullzito

.title {
    widows: 100px;
}

偏移属性

从定位元素的CSS偏移属性中放弃单位有一种奇怪的感觉。

来自ciruelo

.elem {
    left: 14;
}

CSS Calc（）

如果您使用的代码编辑器没有提供适当的突出显示，您将错过这一部分。

来自斯文Wolfermann

.elem {
    font-size: clac(14px + 1vw);
}

CSS颜色

我记得遇到这样的错误。也许这是red用来快速证明某些东西的结果？

来自TJ特里温

.elem {
    color: #red;
}

显示

.title {
    display: absolute;
}

来自尼廷苏雷什

变身

.title {
    translate: (-50%, -50%)
}

来自哈佛鲍勃

结语

「关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔」

一些最常见和最有趣的CSS错误