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…