作者：Ahmad shaded
译者：前端小智
起源：sitepoint
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。当咱们十分专一写代码时候，咱们往往会有意识的写出一些有效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%)}人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。
原文： https://heydesigner.com/css-m...
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻【大迁世界 】第一工夫浏览，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。