英文原文：Top 10 CSS Bad Practices
自我進入這個行業，我就發現開發人員一直在努力征服 CSS。
理由也很充分，開發人員是用邏輯思考的生物。添加一個 DIV 元素導致所有代碼都不得不往下移一行，而另一個 DIV“浮”到左側，感覺沒有任何意義。
你也一定聽到過開發人員的抱怨：
“我們只需要向左邊移動五個像素，但是…天哪！為什麼整個都向下移動了一行。到底是哪裡錯了？！？！？！”
所以，我們今天就來聊一聊 CSS 中的十大錯誤的做法。
根據我作為開發人員使用 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 時認為不應該做的事情。歡迎提出不同的看法。