CSS coding skills and maintenance ★ Mozilla Hacks – the Web developer blog-HTML Tutorial-php.cn

Original link: https://hacks.mozilla.org/2016/05/css-coding-techniques/

Translation link: http://www.zcfy.cc/article/css-coding-techniques-x2605-mozilla-hacks-8211-the-web-developer-blog-1244.html

Recently, I have noticed that many people are stumped by CSS, whether they are newbies or experienced developers. Naturally, they wanted a better language to replace it, and the CSS preprocessor was born from this idea. Some people want to use CSS frameworks to write less code (we have seen in a previous article why this is not a good solution). Some people have begun to abandon CSS and use JavaScript to apply styles.

But you don’t always have to use CSS preprocessors in your workflow. There’s no need to use a bloated framework as the default starting point for every project. Any use of JavaScript to do something that CSS is supposed to do is a terrible idea.

In this article, we will look at some tips and advice for writing better CSS, more maintainable CSS code, so your stylesheets will be shorter and have fewer rules. CSS will become a convenient tool rather than a burden.

Select the smallest available selector

CSS is a declarative language that allows you to specify styles for DOM elements. In this language, some rules take precedence over others, like inline styles overriding some previous rules.

For example, if we have the following HTML and CSS code:

<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>

Copy after login

<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>

Copy after login

Although .button-warning is defined before button, input[type=submit], it will still override the latter’s background attribute. Why? What principles determine which rule will override the style of another?

Accuracy.

Some selectors are considered more precise: for example, a #id selector will override a .class selector. What happens if we apply a more precise selector than it actually needs to be? If we want to override these styles later, and we want to override this selector, we need a more precise... Yes, this is like a snowball that will get bigger and bigger, and eventually it will become difficult to maintain.

So when you write your own selector, ask yourself: Is this the most appropriate selector?

All selector precision rules have been officially defined in the W3C CSS specification, and you can find the details of each selector here. If you want some simpler articles to help you understand, you can read this article.

Don’t add more code for bugs

Let’s consider a common situation: there is a bug in your CSS and you have figured out which DOM element has the wrong style. In addition, you also find that it has an inexplicable attribute that it should not have.

You may want to keep adding more CSS to it, if you do this your code base will become larger and it will be more difficult to find bugs in the future.

As an alternative, go back and look for bugs and use your browser’s developer tools to view elements and all their connections. Determine which rule is applying the styles you don't want. Modify those rules that already exist so that it does not have undesirable consequences.

In FireFox, you can debug stylesheets by right-clicking on an element on the page and selecting Inspect Element.

Look at that cascade in all its glory. Here you can see all the rules that have been applied to the element, in the order in which they were applied. The top rule is more precise and can override previous styles. You can see that some properties in some rules have strikethroughs: this means that a more precise rule has overridden this property.

In addition, not only can you view these rules, in fact, you can choose whether to apply them or not, and you can also modify them to observe the results, which is very helpful for fixing bugs.

The fix may be a rule change, or a rule change elsewhere in the cascade. This may require a new rule. At least you should know that this is the correct requirement and a must for your code base.

This is also a good time to refactor your code. Even though CSS is not a programming language, you should give it the same considerations as JavaScript or Python: it should be clean and readable. Therefore it should also be restructured when necessary.

Don’t use !important

It was already hinted at in the previous suggestion, but due to its importance, I want to emphasize it again: don’t use !importantin your code

!important is a feature in CSS that allows you to break the cascading rules. CSS stands for "Cascading Style Sheets," which is also a tip.

!important is often used when you are anxious to fix a bug because you don’t have enough time or don’t want to fix the cascading relationship.

当你给一个属性应用!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>

Copy after login

添加下面的规则:

<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>

Copy after login

大多数的浏览器默认会给根元素应用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>

Copy after login

即使它是1.25em，和article元素相同，然而我们必须考虑em单位的复合性(compound)。什么意思呢？换句话说，h1作为body的直接子元素，将会有一个20px的字体大小(16*1.25)。然而，我们的h1是位于一个字体大小不同于根元素(我们的article元素)的元素内部。在这种情况下，1.25引用的是由层叠关系中给出的字体大小，因此h1元素的字体大小将会是25px(16 * 1.25 * 1.25)。

顺便说一句，作为代替自己来记忆这些乘法链，你可以使用Inspector面板中的Computed选项卡，它显示了实际的，最终的像素值。

CSS coding skills and maintenance ★ Mozilla Hacks – the Web developer blog

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>

Copy after login

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>

Copy after login

将会被翻译为以下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>

Copy after login

这个特性允许我们写更少的代码，可以更好的组织规则来应用到那些在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>

Copy after login

我们也许会在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>

Copy after login

主要的问题在于这些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>

Copy after login

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

<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>

Copy after login

这将会生成以下的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>

Copy after login

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

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

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

<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>

Copy after login

这将会被翻译为：

<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>

Copy after login

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

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