CSS代码技巧与维护★MozillaHacks–theWebdeveloperblog

译文链接 : 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-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代码：

 
Title
 
One Ring to bring them all and in the darkness bind the.