英文 | https://javascript.plainenglish.io/5-common-css-mistakes-that-you-need-to-avoid-53e51ed98d04

翻譯 | 楊小二

1、不使用相對單位

/* wrong */element{ font-size: 18px; margin: 10px; line-height: 15px;}

比較好的做法：

/* right */element{ font-size: 1.2rem; margin: 0.5rem; line-height: 1.3em;}

2、沒有重置CSS

每個 Web 瀏覽器都有自己的默認樣式。因此，當網(wǎng)頁不包含 CSS 時，瀏覽器會為文本、填充、邊距等添加一些基本的默認樣式。

每個瀏覽器都有獨特的默認樣式，這就是為什么通過添加 CSS 重置樣式來重置這些瀏覽器默認樣式的原因。但是，許多開發(fā)人員并沒有這樣做。

我們通過添加 CSS 重置樣式可以避免出現(xiàn)這個錯誤。

你可以通過使用通用選擇器(*)重置邊距、填充、框大小和文本字體來做到這一點。

像這樣：

*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "your preferd font here";}

3、 重復代碼

許多開發(fā)人員在談到 CSS 時都會重復自己的代碼。這是一種不好的做法，因為你需要減少代碼以使其具有高性能且易于管理。

因此，請始終尋找減少 CSS 并避免重復代碼的方法。

下面是一個例子：

不好的做法：

/* wrong */.container {    background-color: #000;    border-radius: 0.5rem;}
.sidebar {    background-color: #000;    border-radius: 0.5rem;}

好的做法：

/* right */.container, .sidebar {    background-color: #000;    border-radius: 0.5rem;}

4、不使用縮寫

同樣在 CSS 中，你可以使用縮寫來編寫更少的 CSS 代碼。但是，許多開發(fā)人員不使用這些簡寫，或者他們甚至不知道它們。

這里有些例子：

不使用縮寫（不友好的方式）：

element{ background-image: url(file.png); background-repeat: no-repeat; background-position: center;}

使用縮寫（比較好方法）：

element{ background: url(file.png) no-repeat center;}

這是另一個例子：

/* without shorthand */element{ font-family: Helvetica; font-size: 1rem; font-weight: bold;}/* using a shorthand */element{ font: bold 1rem Helvetica;}

如你所見，縮寫減少了 CSS 代碼，這就是為什么，我推薦你盡可能多地使用它們的原因。

5、使用顏色名稱

不要使用諸如red、blue等這樣的顏色名稱。相反，我建議你使用十六進制的顏色值來表示顏色。

為什么？因為當你使用顏色名稱時，例如，red顏色在所有瀏覽器中看起來會完全不相同。你通過使用顏色名稱red的話，那么就意味著你允許瀏覽器顯示它認為是紅色的顏色。

這就是為什么我建議使用十六進制顏色來表示，它可以更具體地選擇你的顏色以在所有瀏覽器中看起來相同。

不好的方法：

/* wrong */element{ color: blue;}

好的辦法：

/* correct */element{ color: #2596be;}

結論

如你所見，以上5點就是作為 Web 開發(fā)人員需要避免的一些 CSS 錯誤。我也犯了一些這樣的錯誤。這就是為什么我想和你分享它們的原因，希望那些新的開發(fā)者不要再犯我之前犯過的一些錯誤。

最后，感謝你閱讀這篇文章，希望你覺得它對你有用。

學習更多技能

請點擊下方公眾號