前端想拿萬元月薪？CSS開發中的10個易錯點一定要先規避掉！

我發現前端開發人員一直在努力征服CSS。理由也很充分，開發人員是用邏輯思考的生物。新增一個DIV元素導致所有程式碼都不得不往下移一行，而另一個DIV“浮”到左側，感覺沒有任何意義。

你也一定聽到過開發人員的抱怨：“我們只需要向左邊移動五個畫素，但是…天哪！為什麼整個都向下移動了一行。到底是哪裡錯了？！？！？！”

根據我作為前端開發人員使用CSS的經驗，下面是我的十個“不要”。

1不要濫用類

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

2不要把一切都扔進一個CSS檔案中

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

3不要命名選擇器為“.red-with-green-dashed-lines”（紅綠虛線)

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

4不要忘記註釋

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

5不要害怕開發工具

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

6不要害怕覆蓋

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

7不要濫用 !很重要

CSS的整體思路是，從一個到另一個地“層疊”樣式。!重點是要記住排雷一樣地踏遍所有早先的樣式。: -)

8不要使用大量網路字型

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

9不要手動編碼所有的CSS

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

10不要讓CSS過於“臃腫”

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

以上只是我作為一個開發人員在編寫CSS時認為不應該做的事情。希望能幫助到各位前端同行！