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程式碼：

<code><span class="tag"><button<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"button-warning"<span class="tag">></span></span></span></span></span></span></code>

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">warning <span class="pun">{<span class="pln">
  background<span class="pun">:<span class="pln"> red<span class="pun">;<span class="pln">
<span class="pun">}<span class="pln">

button<span class="pun">,<span class="pln"> input<span class="pun">[<span class="pln">type<span class="pun">=<span class="pln">submit<span class="pun">]<span class="pln"> <span class="pun">{<span class="pln">
  background<span class="pun">:<span class="pln"> gray<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

儘管.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代码：

<code><span class="tag"><article><span class="pln">
  <span class="tag"><h1><span class="pln">Title<span class="tag"></h1><span class="pln">
  <span class="tag"><p><span class="pln">One Ring to bring them all and in the darkness bind the.<span class="tag"></p><span class="pln">
<span class="tag"></article></span></span></span></span></span></span></span></span></span></span></span></code>

添加下面的规则:

<code><span class="pln">article <span class="pun">{<span class="pln">
  font<span class="pun">-<span class="pln">size<span class="pun">:<span class="pln"> <span class="lit">1.25em<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></code>

大多数的浏览器默认会给根元素应用16px的字体大小（顺便说一下，这个特性很容易被重写）。因此上面的article元素将有20px的字体大小（16*1.25）。

那么对于h1元素呢？为了更好的理解接下来将要发生的，让我们给样式表再添加另外的CSS规则：

<code><span class="pln">h1 <span class="pun">{<span class="pln">
  font<span class="pun">-<span class="pln">size<span class="pun">:<span class="pln"> <span class="lit">1.25em<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></code>

即使它是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

<code><span class="pln">article <span class="pun">{<span class="pln"> font<span class="pun">-<span class="pln">size<span class="pun">:<span class="pln"> <span class="lit">1.25em<span class="pun">;<span class="pln"> <span class="pun">}<span class="pln">
h1 <span class="pun">{<span class="pln"> font<span class="pun">-<span class="pln">size<span class="pun">:<span class="pln"> <span class="lit">1.25rem<span class="pun">;<span class="pln"> <span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

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代码：

<code><span class="pln">a <span class="pun">{<span class="pln">
  text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> none<span class="pun">;<span class="pln">
  color<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln">

  <span class="pun">&.<span class="pln">important <span class="pun">{<span class="pln">
    font<span class="pun">-<span class="pln">weight<span class="pun">:<span class="pln"> bold<span class="pun">;<span class="pln">
  <span class="pun">}<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

将会被翻译为以下CSS规则：

<code><span class="pln">a <span class="pun">{<span class="pln">
  text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> none<span class="pun">;<span class="pln">
  color<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln">
<span class="pun">}<span class="pln">

a<span class="pun">.<span class="pln">important <span class="pun">{<span class="pln">
  font<span class="pun">-<span class="pln">weight<span class="pun">:<span class="pln"> bold<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

这个特性允许我们写更少的代码，可以更好的组织规则来应用到那些在DOM树中通常在一起的元素。这对调试也非常好用。

然而，滥用这个特性的现象随处可循，最终在CSS选择器竟然重复了整个DOM，因此，如果我们有以下HTML:

<code><span class="tag"><article<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"post"<span class="tag">><span class="pln">
  <span class="tag"><header><span class="pln">
    <span class="com"><!-- &hellip; --><span class="pln">
    <span class="tag"><p><span class="pln">Tags: <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"..."<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"tag"<span class="tag">><span class="pln">irrelevant<span class="tag"></a></p><span class="pln">
  <span class="tag"></header><span class="pln">
  <span class="com"><!-- &hellip; --><span class="pln">
<span class="tag"></article></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

我们也许会在CSS样式表中发现:

<code><span class="pln">article<span class="pun">.<span class="pln">post <span class="pun">{<span class="pln">
  <span class="com">// ... other styling here<span class="pln">
  header <span class="pun">{<span class="pln">
    <span class="com">// ...<span class="pln">
    p <span class="pun">{<span class="pln">
      <span class="com">// ...<span class="pln">
      a<span class="pun">.<span class="pln">tag <span class="pun">{<span class="pln">
        background<span class="pun">:<span class="pln"> <span class="com">#ff0;<span class="pln">
      <span class="pun">}<span class="pln">
    <span class="pun">}<span class="pln">
  <span class="pun">}<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

主要的问题在于这些CSS规则中是它们是非常特定的选择器。我们已经知道这是我们极力避免的。这儿也存在一个过度嵌套的问题。我已经在另外一篇文章讨论过了。

总之，不要生产那些你自己永远都不会输入的CSS嵌套规则。

包含 VS 扩展

另外一个有用的CSS特性是 混入,它是一种可复用的CSS块。例如，假如我们想要给一个按钮应用样式，并且它们中的大多数都有一些基本相同的CSS属性。我们也可以创建一个在Less混入像下面的代码:

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="kwd">base<span class="pun">()<span class="pln"> <span class="pun">{<span class="pln">
  padding<span class="pun">:<span class="pln"> <span class="lit">1em<span class="pun">;<span class="pln">
  border<span class="pun">:<span class="pln"> <span class="lit">0<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

然后，创建一个像下面的规则：

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">primary <span class="pun">{<span class="pln">
  <span class="pun">.<span class="pln">button<span class="pun">-<span class="kwd">base<span class="pun">();<span class="pln">
  background<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

这将会生成以下的CSS：

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">primary <span class="pun">{<span class="pln">
  padding<span class="pun">:<span class="pln"> <span class="lit">1em<span class="pun">;<span class="pln">
  border<span class="pun">:<span class="pln"> <span class="lit">0<span class="pun">;<span class="pln">
  background<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

正如你所看到的，对于复用一些常见的代码非常有用。

除过"包含"一个混入，其实还有另外一个选择:“扩展”或者说是继承它（确切的术语众口不一）。它所做的就是合并多个选择器到同一个规则。

我们来看一个使用混入的例子吧:

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">primary <span class="pun">{<span class="pln">
  <span class="pun">&:<span class="pln">extend<span class="pun">(.<span class="pln">button<span class="pun">-<span class="kwd">base<span class="pun">)<span class="pln">
  background<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln">
<span class="pun">}<span class="pln">

<span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">danger <span class="pun">{<span class="pln">
  <span class="pun">&:<span class="pln">extend<span class="pun">(.<span class="pln">button<span class="pun">-<span class="kwd">base<span class="pun">)<span class="pln">
  background<span class="pun">:<span class="pln"> red<span class="pun">;<span class="pln">
<span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

这将会被翻译为：

<code><span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">primary<span class="pun">,<span class="pln"> <span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">danger <span class="pun">{<span class="pln">
  padding<span class="pun">:<span class="pln"> <span class="lit">1em<span class="pun">;<span class="pln">
  border<span class="pun">:<span class="pln"> <span class="lit">0<span class="pun">;<span class="pln">
<span class="pun">}<span class="pln">

<span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">primary <span class="pun">{<span class="pln"> background<span class="pun">:<span class="pln"> blue<span class="pun">;<span class="pln"> <span class="pun">}<span class="pln">
<span class="pun">.<span class="pln">button<span class="pun">-<span class="pln">danger <span class="pun">{<span class="pln"> background<span class="pun">:<span class="pln"> red<span class="pun">;<span class="pln"> <span class="pun">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

网上一些文章告诉我们只需要使用“包含”。然而另外一些人却说使用“扩展”。事实是它们生产截然不同的代码，事实上它们都没有问题,而是依赖于你所使用的处理器更适合使用哪种。

---

我希望这可以帮助你重新打量你的CSS代码，能写更好的规则。记住我前面所说的：CSS 也是代码，因此同样值得被关注，仔细维护你的代码库。如果你给它更多的热爱，你一定会收到回报。

关于Belén Albeza

Belén 是一位工程师和游戏开发者，目前工作与Mozilla 开发联盟。她关注网络标准的制定，高质量代码，以及游戏开发。

• www.belenalbeza.com
• @ladybenko

More articles by Belén Albeza…