CSS開發中的十大錯誤用法

自從接觸前端軟件開發以來，我發現開發猿一直在努力征服着CSS。
理由也很充分，開發人員是用邏輯思考的生物。

添加一個DIV元素致使全部代碼都不得不往下移一行，而另外一個DIV「浮」到左側，感受沒有任何意義。

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

「咱們只須要向左邊移動五個像素，可是…天哪!爲何整個都向下移動了一行。究竟是哪裏錯了?!?!?!」

因此，這篇文章就和你們來聊一聊CSS中的十大錯誤的作法。

1.不要濫用類

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

2.不要把一切都扔進一個CSS文件中

分區CSS使其更易於管理。每個CSS文件均可以分解成例如header.css、footer.css等邏輯組件。

3.不要懼怕開發工具

如今的每一個瀏覽器都有本身的一套開發工具，一般是按F12。這些工具在「調試CSS」時相當重要。

4.不要忘記註釋

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

5.不要命名選擇器爲「.red-with-green-dashed-lines」(紅綠虛線)

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

6.不要濫用 !很重要

CSS的總體思路是，從一個到另外一個地「層疊」樣式。 !重點是要記住排雷同樣地踏遍全部早先的樣式。

7.不要讓CSS過於「臃腫」

空格會佔用CSS文件的空間空間。因爲咱們都但願CSS可以快速加載，所以在部署到網站以前最好使用CSS壓縮工具來一次瘦身。

8.不要使用大量網絡字體

有些人喜歡本身排版。只在網站上使用一個或兩個(最多三個)網絡字體，而後迴歸到瀏覽器默認設置，以保持網站的優化。

9.不要手動編碼全部的CSS

爲了保持CSS的DRY，可使用CSS預處理程序例如LESS或SASS。使用這些預處理器的最大好處是，你能夠定義變量，例如在上面定義配色方案，而後重複使用到全部CSS，而沒必要當你須要修改的時候追蹤每一個顏色。

10.不要懼怕覆蓋

固然，CSS框架，例如Bootstrap和Foundation都較爲巨大，但每個都須要根據你的須要作出一點調整。當你獲得一個更新的框架時，它將覆蓋你的改變。與其深刻挖掘龐大的CSS文件，還不如建立一個bootstrap-overrides.css文件，按照你的意願調整框架。