CSS開發中的10個不要

自我進入這個行業，我就發現開發人員一直在努力征服css。

理由也很充分，開發人員是用邏輯思考的生物。新增乙個div元素導致所有**都不得不往下移一行，而另乙個div「浮」到左側，感覺沒有任何意義。

你也一定聽到過開發人員的抱怨：

「我們只需要向左邊移動五個畫素，但是…天哪！為什麼整個都向下移動了一行。到底是**錯了？！？！？！」

所以，我們今天就來聊一聊css中的十大錯誤的做法。

根據我作為開發人員使用css的經驗，下面是我的十個「不要」。

[b]1.不要濫用類[/b]

在有意義的地方使用id而不要使用類。這是乙個使得瀏覽器能夠更快訪問dom元素的方法。

[b]2.不要把一切都扔進乙個css檔案中[/b]

分割槽css使其更易於管理。每乙個css檔案都可以分解成例如header.css、footer.css等邏輯元件。

[b]3.不要命名選擇器為「.red-with-green-dashed-lines」（紅綠虛線)[/b]

根據頁面上的元件命名你的選擇器。例如：「header-left」，「content-title」或「content-date」更具描述性。

[b]4.不要忘記注釋[/b]

注釋在css中非常重要，可用來理解每個樣式如何與其他樣式關聯以及什麼顏色方案適用於哪些元件。

[b]5.不要害怕開發工具[/b]

現在的每個瀏覽器都有自己的一套開發工具，通常是按f12。這些工具在「除錯css」時至關重要。

[b]6.不要害怕覆蓋[/b]

當然，css框架，例如bootstrap和foundation都較為巨大，但每乙個都需要根據你的需要做出一點調整。當你得到乙個更新的框架時，它將覆蓋你的改變。與其深入挖掘龐大的css檔案，還不如建立乙個bootstrap-overrides.css檔案，按照你的意願調整框架，只是…

[b]7.不要濫用 !很重要[/b]

css的整體思路是，從乙個到另乙個地「層疊」樣式。 !重點是要記住排雷一樣地踏遍所有早先的樣式。

[b]8.不要使用大量網路字型[/b]

這也是顯而易見的，但有些人就是喜歡自己排版。只在**上使用乙個或兩個（最多三個）網路字型，然後回歸到瀏覽器預設設定，以保持**的優化。

[b]9.不要手動編碼所有的css[/b]

為了保持css的dry，可以使用css預處理程式例如less或sass。使用這些預處理器的最大好處是，你可以定義變數，例如在上面定義配色方案，然後重複使用到所有css，而不必當你需要修改的時候追蹤每個顏色。

[b]10.不要讓css過於「臃腫」[/b]

空格會占用css檔案的空間空間。由於我們都希望我們的css能夠快速載入，因此在部署到**之前最好使用css壓縮工具來一次**。

以上只是我作為乙個開發人員在編寫css時認為不應該做的事情。歡迎提出不同的看法。

英文原文：top 10 css bad practices