当我们非常专注于处理Web项目时，我们往往会忘记或犯一些可能导致无效CSS代码的错误。我喜欢称这些“潜意识错误”。导致我们问自己的那种错误：“糟糕，我为什么要这样做？”而解决它们并不需要花费很多时间，只要您第一时间发现它们即可。
我在Twitter上询问了前端开发人员可能犯的最有趣的错误，并且得到了一些有趣的答复。
在本文中，我将介绍我们在潜意识中遇到的一些最常见和最有趣的CSS错误。
我做的错误
字体大小
之间误认font-size和font-weight是常见的。这是我做得太多的错误。
.title {
font-size: bold;
}不透明度
我不完全知道原因，但有时我会忘记不透明度值的百分比。
.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%)
}来自哈佛鲍勃
