携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第0天，点击查看活动详情
新出了一个系列：Vue2与Vue3 技巧小册
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后，我们经常会反问自己：“为什么我写出这样低级错误？” 不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。
跟着本文看看，我会经常写哪些有趣的 CSS 错误。
Font Size
? 我在font-size和font-weight之间经常犯错误，如下所示：
.title {
font-size: bold;
}Opacity
我也不知道啥原因，但有时我会忘记写百分比 ?：
.title {
opacity: 50;
}关于 opacity 我还经常犯下面错误：
.title {
/* 现这一点并不容易，你们看出错误在哪里吗? ?*/
opaciy: 0.5;
Font Weight
是 light 还是 lighter ??
.title {
font-weight: light;
}Padding
当你认为属性是padding，而实际上用的是padding-top时，就会发生这种情况?:
.section {
padding-top: 10px 20px;
}人才，优秀 ?。
CSS Grid
对于 CSS Grid 有时我会潜意识的写 grid-column 而不是 grid-template-columns ?:
.section {
grid-columns: 1fr 1fr 1fr;
}CSS 变量
对于 CSS 变量的使用，我也经常忘记写 var ?：
.title {
color: --brand-color;
}? 正确的写法如下：
.title {
color: var(--brand-color)
}Box Shadow
? 对于重置 box-shadow 我经常用 0 来重置：
.title {
/* 非法的 */
box-shadow: 0;
}? 正确的写法如下：
.title {
box-shadow: none;
}Visibility
隐藏元素可以使用 visibility，但我会经常这样写 ?：
.title {
visibility: none;
}? 正确的写法如下：
.title {
visibility: hidden;
}Width
对于 width 有时会脑抽 ?，这样写：
.title {
widows: 100px;
}Offset 属性
对于 css 偏移属性，我也会经常这么写:
.elem {
left: 14;
}少了啥，大家自己体会 ?。
CSS calc()
如果你的代码没有高亮的提示的功能，你也许也会这样写 ?：
.elem {
font-size: clac(14px + 1vw);
}CSS color
我记得曾经遇到过这样的错误 ?:
.elem {
color: #red;
}Display
? 不多说了，大家自己体会：
.title {
display: absolute;
}Transforms
?
.title {
translate: (-50%, -50%)
}人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。
作者：Ahmad shaded 译者：前端小智 来源：sitepoint
编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
