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 id="span-class-pln-Title-span-class-tag"><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…