[[339318]]

當(dāng)我們非常專注寫代碼時(shí)候，我們往往會無意識的寫出一些無效CSS代碼。 我把這種稱為 “潛意識錯(cuò)誤”。 導(dǎo)致這種錯(cuò)誤后，我們經(jīng)常會反問自己：“為什么我寫出這樣低級錯(cuò)誤?” 不過，這些錯(cuò)誤都比較好解決，不需要花很多時(shí)間，只要糾正一下就行了。

跟著本文看看，我會經(jīng)常寫哪些有趣的 CSS 錯(cuò)誤。

Font Size

我在font-size和font-weight之間經(jīng)常犯錯(cuò)誤，如下所示：

.title { 
    font-size: bold; 
} 

Opacity我也不知道啥原因，但有時(shí)我會忘記寫百分比 ：

.title { 
    opacity: 50; 
} 

關(guān)于 opacity 我還經(jīng)常犯下面錯(cuò)誤：

.title { 
    /* 現(xiàn)這一點(diǎn)并不容易，你們看出錯(cuò)誤在哪里嗎? 😨*/ 
    opaciy: 0.5; 

Font Weight

是 light 還是 lighter 😲?

.title { 
    font-weight: light; 
} 

Padding

當(dāng)你認(rèn)為屬性是padding，而實(shí)際上用的是padding-top時(shí)，就會發(fā)生這種情況🔨:

.section { 
    padding-top: 10px 20px; 
} 

人才，優(yōu)秀 🙀。

CSS Grid

對于 CSS Grid 有時(shí)我會潛意識的寫 grid-column 而不是 grid-template-columns 😖:

.section { 
    grid-columns: 1fr 1fr 1fr; 
} 

CSS 變量

對于 CSS 變量的使用，我也經(jīng)常忘記寫 var 😌：

.title { 
    color: --brand-color; 
} 

正確的寫法如下：

.title { 
    color: var(--brand-color) 
} 

Box Shadow😧

對于重置 box-shadow 我經(jīng)常用 0 來重置：

.title { 
    /* 非法的 */ 
    box-shadow: 0; 
} 

正確的寫法如下：

.title { 
    box-shadow: none; 
} 

Visibility

隱藏元素可以使用 visibility，但我會經(jīng)常這樣寫 😝：

.title { 
    visibility: none; 
} 

正確的寫法如下：

.title { 
    visibility: hidden; 
} 

Width

對于 width 有時(shí)會腦抽 😮，這樣寫：

.title { 
    widows: 100px; 
} 

Offset 屬性

對于 css 偏移屬性，我也會經(jīng)常這么寫:

.elem { 
    left: 14; 
} 

少了啥，大家自己體會 🐶。

CSS calc()

如果你的代碼沒有高亮的提示的功能，你也許也會這樣寫 😉：

.elem { 
    font-size: clac(14px + 1vw); 
} 

CSS color

我記得曾經(jīng)遇到過這樣的錯(cuò)誤 😜:

.elem { 
    color: #red; 
} 

Display

不多說了，大家自己體會：

.title { 
    display: absolute; 
} 

Transforms😛

.title { 
    translate: (-50%, -50%) 
} 

作者：Ahmad shaded 譯者：前端小智 來源：sitepoint 原文：https://heydesigner.com/css-mistakes-on-autopilot/

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。