当我们非常专注写代码时候，总结我们往往会无意识的书写时候写出一些无效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; } 

正确的云南idc服务商写法如下：

.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/

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