CSS最佳實踐

CSS，總所周知，入門較爲簡單，不少人稍微學習一下基本就能夠搗鼓出一個簡單頁面了。但另外一方面，就算是最專業的Web開發者，可能也很難完美的管理好CSS。入門易，難精通，這其中涉及到各瀏覽器的兼容問題、CSS不斷髮展的新特性，甚至撇開設計稿也對前端人員有必定的美學要求等等，但這對喜歡這門語言的人來講大概也正是它的魅力所在！

進入正題，在前端亂燉看到一篇文章，叫《CSS最佳實踐—成爲CSS忍者的十四步（上）》，這裏簡單的總結一下。

第一條：掌握CSS特殊層次結構

CSS特殊層次結構，是常常被忽略的基礎知識，能夠用這個方面的問題來測試一我的才CSS知識全面與否，由於一個真正精通CSS的前端開發者，必然知曉這門語言的各類細節，況且是重要的細節？

那麼既然它如此重要，爲何它是CSS最容易被忽略的部分之一呢，並且爲何極少的CSS實踐中會說起到？大概是由於你可能須要作一些數學運算。在這個層次結構中，每一個CSS選擇器都有一些特定的值。並且當你組合起選擇器時，這些值會增長。

通配符選擇器的值最低，幾乎等於0，能夠說全部其餘選擇器都優先於它。後面是元素選擇器，值爲1.而後是待遇僞元素的元素，值結合起來爲2…………一直排下去，最高值是元素選擇器、id選擇器、class選擇器加上一個元素選擇器的組合。值爲112。下面提供一個CSS特殊層次結構的表格，示具體的層次算法。

第二條：避免使用!important聲明

這一條其實也和CSS層次結構有關係，!improtant是 CSS1就定義的語法，做用是提升指定樣式規則的應用優先權，使其有最高優先級，至關於寫在最下面。那爲何說要避免使用!important聲明呢？不是說這條規則自己有多大問題，而是它會帶來你不能避免的惡性循環。

尤爲是在團隊合做中，若你或同事在CSS中已經使用了!improtant聲明，遇到要修改覆蓋這條樣式規則的狀況下，你會怎麼辦？幾種選擇，第一，冒險移出這條!improtant聲明，可能會破壞一些東西，而後花大量時間去重寫並測試重寫後樣式如初。第二，運用上一條CSS層次結構的知識，使用更高層級的選擇器來覆蓋!improtant聲明。好比以前聲明應用在class選擇器上，爲了覆蓋它，你可能會用到兩個元素+class選擇器的方法、用id選擇器的方法，或者二者結合。可是後面的一條規則會告訴你CSS中爲何不要使用id選擇器，所以這個方法也不夠好。第三，再次添加!improtant聲明覆蓋，問題顯而易見，治標不治本。

總而言之，當你不得不對使用了!improtant的樣式進行覆蓋時，你就會發現問題所在，它會產生一個惡性循環。因此解決辦法不是對!improtant聲明替換修補或者覆蓋，而是一開始就不要用!improtant聲明！

第三條：不要使用ID選擇器

直接用原文做者的一段話，總結得很好：

樣式化元素時千萬不要用ID。爲何說它屬於CSS最佳實踐呢？第一，ID是不可複用的，你只能在一個頁面中用一個特定的ID元素。因此若是你想要在同一個頁面樣式化更多的元素，你須要使用更多的ID和更多行的CSS。第二，這是惡性循環的開始，我又要扯到CSS層次結構了。咱們在前邊的!improtant中有提到這個。第三，對於ID的爭議是它一般用來指特定的元素，那麼你就不可能讓你的CSS變得簡短又可複用。讓樣式太過特製化不是個好主意。相反的你應該讓樣式更具抽象和通用性。這能夠幫助你重複地使用同一個樣式。若是你在每一個頁面都用了超過一個特定的ID，那麼可複用的CSS這個目標就不可能實現。

關於性能，確實ID選擇器比class選擇器要快，但這個性能優點在你寫的CSS規則不夠多的時候並不明顯。並且你若想將這種保持性能優點，你可使用純粹的id選擇器，一旦在id選擇器後面添加了其餘選擇器，id選擇器的速度優點也被衝擊掉了，要知道，瀏覽器是從右向左閱讀你的的CSS的。

結論就是性能提高的惟一途徑就是用純id選擇器，同時你須要有足夠多的CSS規則讓優點顯現。顯然這些都不可取，因此你應該避免使用ID選擇器。

第四條：避免層次太高的元素

層次太高的元素，就是給一個元素賦予了過於複雜的選擇器。上面提到過，瀏覽器是從右到左閱讀你的選擇器，咱們來看這樣一個選擇器nav .link a,瀏覽器會先尋找全部的a標籤，而後選出類名爲.link元素中的a標籤，而後纔是nav標籤中.link 裏的a標籤。這樣問題就明顯了，使用層次太高的元素無疑會拖緩CSS的渲染，並且會使你的CSS文件字節冗餘，這樣的選擇器根本沒有必要。

值得一提的就是這條規則也是SASS或LESS嵌套中提倡嵌元元素素不要過多的緣由，它會使得最終編譯的CSS文件擁有大量層次太高的元素！

高效、簡練、複用性的CSS纔是咱們的追求。

第五條：reset仍是normalize

在現階段，CSS在各大瀏覽器的兼容問題依舊是學習CSS很重要的一部分，甚至在實際工做中這個部分比你想象的更加劇要。各瀏覽器對CSS的渲染方式不一樣，致使了這些差別的存在。CSS樣式重置表就是一種解決瀏覽器之間差別得方式。

目前有兩種樣式表可選，Nicolas Gallagher和Jonathan Neal寫的Normalize或Eric A. Meyer寫的Reset。 這兩種樣式表是不一樣的，它們遵循不一樣的方法來移除瀏覽器的不一致性。Normalize只着眼於常規正確的樣式；同時旨在保留默認樣式，沒有徹底移除它們。它包含了一些小的修正來提升可用性。它也相對來講更模塊化些，你能夠提取或刪除你不須要的部分。

Reset樣式表則不太同樣。它經過移除全部的樣式來達成同質化的視覺樣式，給幾乎全部元素設定了普遍性的默認樣式。它除去了全部的樣式像粗體斜體等等。結果就是strong、em、span看起來都差很少。從這個角度講，reset就像一個大錘子，normalize則像一把手術刀。reset堅定地重置全部東西，normalize則是重置須要重置的。

使用reset或者normallize以前，先思考一下你你更喜歡哪一種方式？這兩種樣式表在重置方式和代碼大小上都是有區別的，根據你的興趣或者項目需求選擇。

第六條：別重置全部東西

這條看似和第五條衝突，其實否則！

樣式重置表提供給咱們一種面對各瀏覽器差別的思路，但並非所用時候使用它們都是好的選擇，不管是reset仍是normalize，都包含了大量你可能不會運用到你的項目裏的代碼，所以沒有必要讓這些代碼擴大你的CSS。定製，就是這條的核心思路！

運用樣式重置的思想，根據項目或工做的具體狀況，有選擇的重置一些樣式來保持你的CSS在瀏覽器下的表現統一，這纔是最完美的方式。你能夠多研究兩種重置樣式表的代碼與具體表現，甚至去熟悉瀏覽器的差別。

其實所謂最佳實踐，沒有標準，要結合本身，由表及裏，看清代碼背後是什麼東西，而後再去談靈活運用，才能找到最適合本身的CSS！

最後

貼出參考原文地址：http://www.html-js.com/article/ITqianyan-%203902。我的比較贊成做者的某些觀點，加上了些本身的看法，有些部分直接引用的原文。感謝前人栽陰！