當(dāng)我們非常專注寫代碼時(shí)候，我們往往會(huì)無(wú)意識(shí)的寫出一些無(wú)效css代碼。 我把這種稱為 “潛意識(shí)錯(cuò)誤”。 導(dǎo)致這種錯(cuò)誤后，我們經(jīng)常會(huì)反問自己：“為什么我寫出這樣低級(jí)錯(cuò)誤？” 不過，這些錯(cuò)誤都比較好解決，不需要花很多時(shí)間，只要糾正一下就行了。
跟著本文看看，我會(huì)經(jīng)常寫哪些有趣的 CSS 錯(cuò)誤。
Font Size
我在font-size和font-weight之間經(jīng)常犯錯(cuò)誤，如下所示：
.title {
font-size: bold;
}
Opacity
我也不知道啥原因，但有時(shí)我會(huì)忘記寫百分比 ：
.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í)，就會(huì)發(fā)生這種情況:
.section {
padding-top: 10px 20px;
}
人才，優(yōu)秀 。
CSS Grid
對(duì)于 CSS Grid 有時(shí)我會(huì)潛意識(shí)的寫 grid-column 而不是 grid-template-columns :
.section {
grid-columns: 1fr 1fr 1fr;
}
CSS 變量
對(duì)于 CSS 變量的使用，我也經(jīng)常忘記寫 var ：
.title {
color: --brand-color;
}
正確的寫法如下：
.title {
color: var(--brand-color)
}
Box Shadow
對(duì)于重置 box-shadow 我經(jīng)常用 0 來(lái)重置：
.title {
/* 非法的 */
box-shadow: 0;
}
正確的寫法如下：
.title {
box-shadow: none;
}
Visibility
隱藏元素可以使用 visibility，但我會(huì)經(jīng)常這樣寫 ：
.title {
visibility: none;
}
正確的寫法如下：
.title {
visibility: hidden;
}
Width
對(duì)于 width 有時(shí)會(huì)腦抽 ，這樣寫：
.title {
widows: 100px;
}
Offset 屬性
對(duì)于 css 偏移屬性，我也會(huì)經(jīng)常這么寫:
.elem {
left: 14;
}
少了啥，大家自己體會(huì) 。
CSS calc()
如果你的代碼沒有高亮的提示的功能，你也許也會(huì)這樣寫 ：
.elem {
font-size: clac(14px + 1vw);
}
CSS color
我記得曾經(jīng)遇到過這樣的錯(cuò)誤 :
.elem {
color: #red;
}
Display
不多說了，大家自己體會(huì)：
.title {
display: absolute;
}
Transforms
.title {
translate: (-50%, -50%)
}
人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint 原文：https://heydesigner.com/css-mistakes-on-autopilot/
