一些最常見和最有趣的CSS錯誤

當(dāng)我們非常專注于處理Web項(xiàng)目時(shí)，我們往往會忘記或犯一些可能導(dǎo)致無效CSS代碼的錯誤。我喜歡稱這些“潛意識錯誤”。導(dǎo)致我們問自己的那種錯誤：“糟糕，我為什么要這樣做？”而解決它們并不需要花費(fèi)很多時(shí)間，只要您第一時(shí)間發(fā)現(xiàn)它們即可。

我在Twitter上詢問了前端開發(fā)人員可能犯的最有趣的錯誤，并且得到了一些有趣的答復(fù)。

您經(jīng)常做的最有趣的CSS錯誤是什么？

我的字體太粗了。??

你呢？pic.twitter.com/XUV44Re6Fm

-艾哈邁德·謝德（@ shadeed9）2020年8月9日

在本文中，我將介紹我們在潛意識中遇到的一些最常見和最有趣的CSS錯誤。

我做的錯誤

字體大小

之間誤認(rèn)font-size和font-weight是常見的。這是我做得太多的錯誤。

.title {
    font-size: bold;
}

不透明度

我不完全知道原因，但有時(shí)我會忘記不透明度值的百分比。

.title {
    opacity: 50;
}

另一個常見的問題是使該opacity物業(yè)蒙混過關(guān)。

.title {
    /* It's not easy to spot this */
    opaciy: 0.5;
}

字體粗細(xì)

是light還是lighter？

.title {
    font-weight: light;
}

填充

當(dāng)您認(rèn)為該屬性為padding，而實(shí)際上為時(shí)，可能會發(fā)生這種情況padding-top。

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

CSS網(wǎng)格

有時(shí)，我輸入grid-column而不是grid-template-columns。

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

CSS變量

我不是為什么，但是我發(fā)現(xiàn)我懶得寫var(--brand-color)。

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

盒子陰影

我總是忘記box-shadow應(yīng)該使用來重置none。

.title {
    /* Invalid */
    box-shadow: 0;
}

艾哈邁德·霍斯納（Ahmed Hosna）也提到

來自社區(qū)

能見度

來自大利利夫尼

.title {
    visibility: none;
}

寬度

我無法數(shù)出這樣做的次數(shù)，這讓我想起了Sublime Text。

來自bullzito

.title {
    widows: 100px;
}

偏移屬性

從定位元素的CSS偏移屬性中放棄單位有一種奇怪的感覺。

來自ciruelo

.elem {
    left: 14;
}

CSS Calc（）

如果您使用的代碼編輯器沒有提供適當(dāng)?shù)耐怀鲲@示，您將錯過這一部分。

來自斯文Wolfermann

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

CSS顏色

我記得遇到這樣的錯誤。也許這是red用來快速證明某些東西的結(jié)果？

來自TJ特里溫

.elem {
    color: #red;
}

顯示

.title {
    display: absolute;
}

來自尼廷蘇雷什

變身

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

來自哈佛鮑勃

結(jié)語

「關(guān)注公眾號IQ前端，一個專注于CSS/JS開發(fā)技巧的前端公眾號，更多前端小干貨等著你喔」