目录
选择最小可用选择器
不要为bug添加更多代码
不要使用 !important
不只 px%
Em and rem
Title" >Title
vw 和 vh
其它单位
使用flexbox
当使用CSS处理器时...
不要滥用选择器嵌套
包含 VS 扩展
关于Belén Albeza
首页 web前端 html教程 CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

Sep 21, 2016 pm 01:56 PM

原文链接: 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-warningbutton, 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选项卡,它显示了实际的,最终的像素值。

image01

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

vwvh是视口单位。 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…

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles