总结一些，我在书写 CSS 的时候，经常犯的错误！

[[339318]]

当我们非常专注写代码时候，我们往往会无意识的写出一些无效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 原文：https://heydesigner.com/css-mistakes-on-autopilot/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。