CSS-Codierungskenntnisse und Wartung ★ Mozilla Hacks – der Blog für Webentwickler

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

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

In letzter Zeit ist mir aufgefallen, dass viele Leute von CSS ratlos sind, egal ob sie Neulinge oder erfahrene Entwickler sind. Natürlich wollten sie eine bessere Sprache als Ersatz, und aus dieser Idee entstand der CSS-Präprozessor. Manche Leute möchten CSS-Frameworks verwenden, um weniger Code zu schreiben (wir haben in einem früheren Artikel gesehen, warum dies keine gute Lösung ist). Einige Leute haben begonnen, CSS aufzugeben und JavaScript zum Anwenden von Stilen zu verwenden.

Aber Sie müssen in Ihrem Workflow nicht immer CSS-Präprozessoren verwenden. Es ist nicht erforderlich, für jedes Projekt ein aufgeblähtes Framework als Standardstartpunkt zu verwenden. Jede Verwendung von JavaScript für etwas, was CSS tun soll, ist eine schreckliche Idee.

In diesem Artikel werfen wir einen Blick auf einige Tipps und Ratschläge zum Schreiben von besserem CSS, um den CSS-Code besser wartbar zu machen, sodass Ihre Stylesheets kürzer sind und weniger Regeln haben. CSS wird zu einem praktischen Werkzeug und nicht zu einer Belastung.

Wählen Sie den kleinsten verfügbaren Selektor aus

##

CSS ist eine deklarative Sprache, mit der Sie Stile für DOM-Elemente angeben können. In dieser Sprache haben einige Regeln Vorrang vor anderen, beispielsweise Inline-Stile, die einige vorherige Regeln überschreiben.

Zum Beispiel, wenn wir den folgenden HTML- und CSS-Code haben:

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

Obwohl .button-warning vor button, input[type=submit] definiert ist, überschreibt es dennoch das background-Attribut des letzteren. Warum? Welche Prinzipien bestimmen, welche Regel den Stil einer anderen außer Kraft setzt?

Genauigkeit.

Bestimmte Selektoren gelten als präziser: Beispielsweise überschreibt ein #id-Selektor einen .class-Selektor. Was passiert, wenn wir einen präziseren Selektor anwenden, als er tatsächlich sein muss? Wenn wir diese Stile später überschreiben möchten und diesen Selektor überschreiben möchten, benötigen wir einen präziseren ... Ja, das ist wie ein Schneeball, der immer größer wird und schließlich schwierig zu warten ist.

Wenn Sie also Ihren eigenen Selektor schreiben, fragen Sie sich: Ist dies der am besten geeignete Selektor?

Alle Präzisionsregeln für Selektoren wurden offiziell in der W3C-CSS-Spezifikation definiert. Die Details zu jedem Selektor finden Sie hier. Wenn Sie einige einfachere Artikel zum besseren Verständnis wünschen, können Sie diesen Artikel lesen.

Fügen Sie keinen weiteren Code für Fehler hinzu

Betrachten wir eine häufige Situation: Es gibt einen Fehler in Ihrem CSS und Sie haben herausgefunden, welches DOM-Element den falschen Stil hat. Darüber hinaus stellen Sie auch fest, dass es eine unerklärliche Eigenschaft hat, die es nicht haben sollte.

Möglicherweise möchten Sie weiterhin mehr CSS hinzufügen. Wenn Sie dies tun, wird Ihre Codebasis größer und es wird in Zukunft schwieriger, Fehler zu finden.

Alternativ können Sie zurückgehen und nach Fehlern suchen und die Entwicklertools Ihres Browsers verwenden, um Elemente und alle kaskadierenden Beziehungen anzuzeigen. Bestimmen Sie, welche Regel die nicht gewünschten Stile anwendet. Ändern Sie bereits bestehende Regeln, damit dies keine unerwünschten Folgen hat.

In FireFox können Sie Stylesheets debuggen, indem Sie mit der rechten Maustaste auf ein Seitenelement klicken und 检查元素 auswählen.

Sehen Sie sich diesen Wasserfall in seiner ganzen Pracht an. Hier sehen Sie alle Regeln, die auf das Element angewendet wurden, in der Reihenfolge, in der sie angewendet wurden. Die oberste Regel ist präziser und kann frühere Stile überschreiben. Sie können sehen, dass einige Eigenschaften in einigen Regeln durchgestrichen sind: Dies bedeutet, dass eine genauere Regel diese Eigenschaft überschrieben hat.

Darüber hinaus können Sie diese Regeln nicht nur anzeigen, sondern auch tatsächlich entscheiden, ob Sie sie anwenden möchten oder nicht, und Sie können sie auch ändern, um die Ergebnisse zu beobachten, was beim Beheben von Fehlern sehr hilfreich ist.

Die Lösung kann eine Regeländerung oder eine Regeländerung an anderer Stelle in der Kaskade sein. Dies kann eine neue Regelung erfordern. Zumindest sollten Sie wissen, dass dies die richtige Anforderung und ein Muss für Ihre Codebasis ist.

Dies ist auch ein guter Zeitpunkt, um Ihren Code umzugestalten. Obwohl CSS keine Programmiersprache ist, sollten Sie dieselben Überlegungen anstellen wie JavaScript oder Python: Es sollte sauber und lesbar sein. Deshalb sollte es bei Bedarf auch umstrukturiert werden.

Verwenden Sie nicht !important

Der vorherige Tipp wurde bereits angedeutet, aber aufgrund seiner Wichtigkeit möchte ich ihn noch einmal betonen: Verwenden Sie nicht !important in Ihrem Code

!important ist eine Funktion in CSS, mit der Sie die Kaskadenregeln brechen können. CSS steht für „Cascading Style Sheets“, was ebenfalls ein Tipp ist.

!important wird oft verwendet, wenn Sie einen Fehler beheben möchten, weil Sie nicht genug Zeit haben oder die kaskadierende Beziehung nicht beheben möchten.

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