CSS 代碼技巧與維護 ★ Mozilla Hacks – the Web developer blog

原文連接： https://hacks.mozilla.org/2016/05/css-coding-techniques/

譯文連接 : http://www.zcfy.cc/article/css-coding-techniques-x2605-mozilla-hacks-8211-the-web-developer-blog-1244.html

   最近，我發現許多人被CSS難倒，不管是新手仍是有經驗的開發者。天然地，他們就但願能有一種更好的語言來代替它，CSS預處理器就是從這種想法中誕生的。一些人但願能夠用CSS框架來寫更少的代碼（咱們已經在前一篇文章 看到爲何這不是一種好的方案)。一些人已經開始放棄CSS轉而使用JavaScript來應用樣式。

可是你不必老是在你的工做流中使用CSS預處理器。你也沒有必要用一個臃腫的框架做爲你每個項目的默認開始。任何使用JavaScript來作一些原本CSS應該作的是一件很可怕的想法。

在這篇文章中，咱們將看到一些寫更好的CSS的技巧和建議,更加容易維護的CSS代碼，所以你的樣式表將會變得更短，有更少的規則。CSS會成爲一個便捷的工具而不是一個負擔。

選擇最小可用選擇器

##

CSS是一種聲明式語言，利用它你能夠爲DOM元素指定樣式。在這門語言中，有些規則優先於另外的一些規則，就像行內樣式會重寫一些先前的規則。

例如，若是咱們有如下的HTML和CSS代碼：

<button class="button-warning">

.button-warning { background: red; } button, input[type=submit] { background: gray; }

儘管.button-warning在button, input[type=submit]以前被定義，可是它仍然會重寫後者的background屬性。爲何？是什麼原則在決定哪一個規則將重寫另一個的樣式？

精確度.

某些選擇器被認爲是更加精確的：例如，一個#id選擇器將重寫一個.class選擇器。若是咱們應用一個比它實際須要的更加精確的選擇器會發生什麼？若是咱們以後想要重寫這些樣式，咱們想要重寫這個剛纔的選擇器，咱們須要一個更加精確的...沒錯，這正如一個雪球越滾越大，最終會變的難以維護。

所以，當你本身寫選擇器的時候，先問本身：這是最合適的選擇器嗎？

全部的選擇器精確度規則已經被官方定義在W3C CSS 規範，你能夠在這裏找到每個選擇器的細節。若是想要一些更加簡單文章來幫助理解，能夠讀這篇文章。

不要爲bug添加更多代碼

讓咱們來考慮這樣一種常見的狀況：在你的CSS中有一個bug，你已經找到了是哪一個DOM元素有錯誤的樣式。此外，你還發現它莫名其妙的擁有一個原本不應有的屬性。

你也許想要繼續給它添加更多的CSS，若是你這樣作，你的代碼庫將會變得更大，之後尋找bug將會更加困難。

做爲替代，回頭查找bug，用你瀏覽器的開發工具來查看元素和全部的層聯關係。肯定是哪個規則正應用你不想要的那些樣式。修改那些已經存在的規則以便它不會出現不想要的結果。

在FireFox中，你能夠經過右鍵點擊一個頁面中元素而後選擇檢查元素來調試樣式表。

在它裏面查看你的層聯關係(Look at that cascade in all its glory)。這兒你能夠看到全部被應用到元素的規則，按照它們被應用的順序。最上面的規則精確度更高，能夠重寫先前的樣式。你能夠看到有些規則中的一些屬性有刪除線：這意味着一個更加精確的規則已經重寫了這個屬性。

此外，你不只能夠查看這些規則，事實上，你能夠選擇是否應用它們，也能夠修改它們來觀察結果，這對於修復bug頗有幫助。

修復手段也許是一個規則的改變，或在層聯關係其它位置的規則改變。這也許須要一個新的規則。至少你應該知道這是正確的要求，也是你的代碼庫所必須的。

這也是一個重構代碼不錯的時機。儘管CSS不是一個編程語言，可是你也應該給予它和JavaScript或者Python一樣的考慮：它應該是乾淨的，可讀性好的。所以必要的時候也應該重構。

不要使用 !important

前一個建議中其實已經有暗示了，可是因爲它的重要性，我想要再次強調下它：不要用!important在你的代碼

!important是CSS中的一個容許你打破層疊規則的特性。CSS表明"層疊樣式表", 這也算一個提示。

!important 常常在你着急修復bug的時候使用，因爲你沒有足夠的時間或者不想修復這個層疊關係。

當你給一個屬性應用!important， 瀏覽器將會忽視精確度規則。當你!important一個規則來重寫另一個一樣有!important的規則時，你的大麻煩來了。

其實也有一種合適的使用!important的狀況，就是當你用開發工具調試某些東西的時候。有時候，你須要找到哪個值能夠修復你的bug。在你的開發工具中應用!important來修改CSS規則，這能夠幫助你找到那些你須要的值而不用管層疊特性。

一旦你知道哪些CSS能夠起做用，你能夠回到你的代碼，查看你應該把你的CSS放到層聯關係的哪一層。

不僅 px和%

使用px(pixels)和%(percentages)單位是很直觀的，所以咱們在這兒將會關注那些不爲人知的單位。

Em and rem

最有名的相對單位就是 em。1em就等於那個元素的字體大小。

讓咱們考慮如下HTML代碼：

<article> <h1>Title</h1> <p>One Ring to bring them all and in the darkness bind the.</p> </article>

添加下面的規則:

article { font-size: 1.25em; }

大多數的瀏覽器默認會給根元素應用16px的字體大小（順便說一下，這個特性很容易被重寫）。所以上面的article元素將有20px的字體大小（16*1.25）。

那麼對於h1元素呢？爲了更好的理解接下來將要發生的，讓咱們給樣式表再添加另外的CSS規則：

h1 { font-size: 1.25em; }

即便它是1.25em，和article元素相同，然而咱們必須考慮em單位的複合性(compound)。什麼意思呢？換句話說，h1做爲body的直接子元素，將會有一個20px的字體大小(16*1.25)。然而，咱們的h1是位於一個字體大小不一樣於根元素(咱們的article元素)的元素內部。在這種狀況下，1.25引用的是由層疊關係中給出的字體大小，所以h1元素的字體大小將會是25px(16 * 1.25 * 1.25)。

順便說一句，做爲代替本身來記憶這些乘法鏈，你可使用Inspector面板中的Computed選項卡，它顯示了實際的，最終的像素值。

em單位事實上是很是實用的，經過用它能夠很容易動態改變頁面的尺寸（不只僅是字體大小，還包括其它一些屬性例如 行距， 寬度）。

若是你喜歡em中相對於基本大小的特性，而不喜歡它的複合性。你可使用rem單位。rem單位和em是很是類似的，可是去除了它的複合性，僅僅使用根元素的大小。

所以若是咱們修改咱們前面的CSS中h1部分的em單位爲rem

article { font-size: 1.25em; } h1 { font-size: 1.25rem; }

vw 和 vh

vw和vh是視口單位。 1vw是視口寬度的1%，一樣1vh也就是視口高度的1%。 當你須要一個UI元素佔據整個屏幕的時候（好比傳統的半透明遮罩層），它們很是有用，由於它們並不會和body的大小老是一致。

其它單位

其它的單位也許不如上面的單位那麼廣泛或者有用，可是你有一天必定會遇到它們。你能夠了解更多關於它們的細節(在 MDN 上)。

使用flexbox

咱們已經在前一篇關於CSS框架的文章中討論過這個主題了，flexbox模塊簡化了佈局和對齊對象的工做。若是你對flexbox還不瞭解，查看這個介紹文章。

沒錯，你如今可使用flexbox了，除非你真的由於一些商業上的緣由須要支持那些古老的瀏覽器。目前瀏覽器對於flexbox的支持率是94%以上。所以你能夠不用繼續寫那些浮動divs，它們是多麼的難以調試和維護。

此外，還應該繼續關注最新的Grid 模塊,它將如微風般令人愜意。

當使用CSS處理器時...

CSS編譯器例如Sass或者Less在前端開發領域都很是的流行。它們是極有力的工具，而且若是充分利用可讓你更高效的使用CSS。

不要濫用選擇器嵌套

在這些處理器中，一個比較廣泛的特性就是選擇器嵌套，好比，下面的這個Less代碼：

a { text-decoration: none; color: blue; &.important { font-weight: bold; } }

將會被翻譯爲如下CSS規則：

a { text-decoration: none; color: blue; } a.important { font-weight: bold; }

這個特性容許咱們寫更少的代碼，能夠更好的組織規則來應用到那些在DOM樹中一般在一塊兒的元素。這對調試也很是好用。

然而，濫用這個特性的現象隨處可循，最終在CSS選擇器居然重複了整個DOM，所以，若是咱們有如下HTML:

<article class="post"> <header> <!-- … --> <p>Tags: <a href="..." class="tag">irrelevant</a></p> </header> <!-- … --> </article>

咱們也許會在CSS樣式表中發現:

article.post { // ... other styling here header { // ... p { // ... a.tag { background: #ff0; } } } }

主要的問題在於這些CSS規則中是它們是很是特定的選擇器。咱們已經知道這是咱們極力避免的。這兒也存在一個過分嵌套的問題。我已經在另一篇文章討論過了。

總之，不要生產那些你本身永遠都不會輸入的CSS嵌套規則。

包含 VS 擴展

另一個有用的CSS特性是 混入,它是一種可複用的CSS塊。例如，假如咱們想要給一個按鈕應用樣式，而且它們中的大多數都有一些基本相同的CSS屬性。咱們也能夠建立一個在Less混入像下面的代碼:

.button-base() { padding: 1em; border: 0; }

而後，建立一個像下面的規則：

.button-primary { .button-base(); background: blue; }

這將會生成如下的CSS：

.button-primary { padding: 1em; border: 0; background: blue; }

正如你所看到的，對於複用一些常見的代碼很是有用。

除過"包含"一個混入，其實還有另一個選擇:「擴展」或者說是繼承它（確切的術語衆口不一）。它所作的就是合併多個選擇器到同一個規則。

咱們來看一個使用混入的例子吧:

.button-primary { &:extend(.button-base) background: blue; } .button-danger { &:extend(.button-base) background: red; }

這將會被翻譯爲：

.button-primary, .button-danger { padding: 1em; border: 0; } .button-primary { background: blue; } .button-danger { background: red; }

網上一些文章告訴咱們只須要使用「包含」。然而另一些人卻說使用「擴展」。事實是它們生產大相徑庭的代碼，事實上它們都沒有問題,而是依賴於你所使用的處理器更適合使用哪一種。

---

我但願這能夠幫助你從新打量你的CSS代碼，能寫更好的規則。記住我前面所說的：CSS 也是代碼，所以一樣值得被關注，仔細維護你的代碼庫。若是你給它更多的熱愛，你必定會收到回報。

關於Belén Albeza

Belén 是一位工程師和遊戲開發者，目前工做與Mozilla 開發聯盟。她關注網絡標準的制定，高質量代碼，以及遊戲開發。

• www.belenalbeza.com
• @ladybenko

More articles by Belén Albeza…