书写高效的CSS

原创 2005年05月06日 22:47:00
效率有什么用?

CSS 被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,不仅仅是首页的载入,还包括样式表被缓存以后,后续页面的载入也被加快了的那部分时间。这没错,但首页载入时间的缩短几乎看不出来,这是因为 CSS 代码往往过于冗长了。

    好吧,现在一切都不同了。学点高效地进行 CSS 编码的技巧吧,让你把样式表马上裁减到最小为止。自然,你可能看不到什么惊人的改变,但对于大站来说,微小的字节减少也很重要。

    有很多地方可以减少代码的长度,包括 简记属性 (shorthand properties), 多重声明 (multiple declarations),默认值 (default values), 继承 (inheritance),和空白 (white space)。

简记属性

    Zeroing page margins 提到了一组这样的简记属性,但对于此还有更多的。

通常简记属性包括:


font (控制 "font-size", "font-weight", "line-height", 等等) 
background (控制元素的背景,放置位置,重复次数,等等) 
list-style (设置列表元素前边那个“原点”的属性) 
margin (定义 box 各侧的边缘空白 (margin) 宽度) 
border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性) 
padding (定义 box 各侧的补白 (padding) 宽度) 
上述项目是链接至 W3C CSS 2 规范 的相关章节的。

    例如, font  属性 是用于同时设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的简记属性。当然,它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个,那些缺失的属性都将被设置为它们的 初始值,就像 W3C 规范 中  font property  一节提到的那样。若需要控制很多和字体相关的属性,使用这个简记属性就可以省下样式表中的大量字节了。

    background  和  list-style  属性也是如此。现在还剩下关于 CSS 盒 (box) 模型 四边的那些属性和一点没法归类的杂碎了。

盒侧边的简记属性

    任何块级 (block level) 元素 (像 div,表格,列表,段落等) 的四边都有 边白 (margin),边界 (border),和 补白 (padding),都可以分别设置不同的宽度。对于边界 (border) 来说,还能给每边分配不同的  border-style  和  border-color 。若要一条条地显式地指明所有这些属性,代码就会变得很冗长。使用简记规则的意义正在于此:彻底地减少这样负担。

“钟面”
    当需要指定这三类“盒侧”属性之一,而且各侧的情况又是一样的时候,使用简记属性最基本的功能就行了:


margin: 5px;
border-width: 5px;
padding: 5px; 

    注意:要让边界显示出来,还必须设置 border-style 属性,否则单有  border-width  边界是显示不出来的。既可以直接通过 border-style 来设置它,也可以通过  border 属性。

    然而很有可能某一侧需要一个不同的值,这时 CSS 的“钟面”特性就上台了。把此处的盒子想象为一个钟面,当指针指向 12 点时,表示盒子的正上方,这就是简记属性中第一个值的含义;下一个是 3 点,这是盒子的右侧;接下来是 6 点,表示盒子的下方;最后呢是 9 点,盒子的左侧。

    让我们看看这个例子吧。在页面中我们需要一个 10px 上边白,5px 右边白, 3px 下边白,无左边白的盒子。则  margin  简记属性应该这么写:


margin: 10px 5px 3px 0;

    在属性的声明中,几个值必须也只能用空格来分隔。而且只要那个值不是零,就必须给它指定单位。

    为什么零宽度的边白就不需要指定单位了呢?因为零个任何单位 (px, em, %, 等等) 的值也就等于任意其他单位的值。

改进的钟面

    当某些值重复时,这些“盒侧”属性还能压榨得更短。前面提到过,若各侧都一样,可以只指定一个,让它应用到全部。而一旦顶部和底部的样式是一致的,左侧和右侧却是另一种,margin 的代码可以这么写:


margin: 10px 5px;

    这行代码把顶部和底部的边白设置为 10px,两侧设为 5px。最后一个技巧是这样的:若顶部和底部的不同,两侧的却是一样的,比如上边白 10px,左右边白 5px,下边白 20px,我们可以这么写:

margin: 10px 5px 20px;

    这些缩写完全是根据给出值的数目和顺序决定的。总结起来,一个值 = 所有各侧;两个值 = 上下一种,两侧另一种;三个值 = 上侧一种,左右同一种,下侧一种;当然还有四个值 = 按照顺时针。好了,现在不那么难记住了吧?

边界 (border) 的一些区别

    同样的钟面简记模型也可以用于 border 简记属性 和 padding。 border-width ,  border-color ,  border-style , 与  padding  也采用和 margin 一样的方式工作。然而处理  border  属性时却有点不同。  border  属性是同时给盒子的各侧设置 border-width, border-style, 及 border-color 属性的。

    如果所有四侧的样式都一样,那当然不会有什么问题。可万一他们不同呢?我们还得回去用那些老式的 border-top, border-right 们?没错,是可以。但幸好我们还有更有效率一点的方法。

    考虑我们这个盒子的各个边界有同样的 style 和 color,但宽度不同的情况,最有效的方法是,先像往常一样用  border  简记法来定义好 border-width, border-style, 和 border-color;然后再设置一次  border-width  属性,覆盖上面设置的宽度:


border: 10px solid red;
border-width: 10px 5px 3px 0;

    如果所有的边界属性 (width、style 和 color) 都各侧不同,那上面的方法恐怕就没什么用了,但通常不会遇到这么怪异的情况。如果变化的属性仅仅是  border-style  或者  border-color  的话,上述的方法改改就可以像  border-width  的情况那样用了。

    下面我们看看在另一种情形下书写高效的 CSS 会带来什么改变。

多重声明

    考虑我们有 6 个采用绝对定位的 div (比如 Dreamweaver 里的层),且它们的其他属性都一样,只不过在页面中的位置不同。因为它们的位置不同,自然应该有不同的 ID 或者是 class,但剩下的属性还是一样的。

    一个 (所见即所得的) 布局编辑器恐怕给每个 ID 都各自写一套属性,包括字体的规则、文本的规则、位置的定义等等。可一遍遍地给这些 div 重复完全一样的规则未免笨了点,不是么?那这样就可以把这些规则减到最短了:


#first  {left: 0;}
#second {left: 100px;}
#third  {left: 200px;}
#fourth {left: 300px;}
#fifth  {left: 400px;}
#sixth  {left: 500px;}
#first, #second, #third, #fourth, #fifth, #sixth {
  position: absolute;
  top: 0;
  width: 75px;
  font-size: .9em;
  font-weight: bold;
  text-align: center;
  line-height: 1.4em;
  background-color: silver;
  color: navy;
  padding: 5px;
  border: 1px solid navy;
  }

    列出所有类似的这些 div 的 ID,用 , 和一个空格分隔,下面的规则块会被应用到所有这些 ID 上。显然这样的规则如果给每个 ID 都重复一遍,代码就膨胀得多了。这恐怕是最常用也最有效的缩短样式表方法了。

    注意:注意最后一个 ID 选择符 并没有 跟着一个逗号。(若多了逗号) 有些浏览器中可能还能看到那些 div,另一些就有可能把这样的样式表视为错误而不显示任何一个 div 了。

默认值

    许多 CSS 属性都有它们的默认值,如果这个属性没被定义取代,它们就将应用于 HTML 元素上。比如说每个补白属性中, padding-top ,  padding-right ,  padding-bottom , 和  padding-left  的初始值都是  0 。因此如果某个元素不需要任何的补白,自然就可以不设置补白的那些属性了。

    注意: 那些简记属性——比如我们先前讨论过的—— 里面,或者其本身都没有什么默认的值。毕竟简记属性其实只是独立属性的一种重现而已,所以如果硬说它们有默认值的话,采用的也是独立属性的那些默认值。尽管 CSS 规范的 Property Index 一节中规定的许多默认值都是  none  或  0 ,浏览器们却往往给不同的属性设置一些不同的默认值。

    例:Opera 浏览器给 body 元素设置了 8px 的补白。h1-h6 标题和段落,默认都有非零的边白。列表和列表子项中用到的默认边白和补白,每个浏览器都有所不同。

继承

    另一个避免写出冗余代码的方法是,了解哪些属于父元素的属性会由子元素继承下来。会被继承的属性只有很少一些,而且其中大部分是不常用的,比如  voice-family 。所以列个能继承的常用属性的表,其实是很短的,下面就是按字母顺序排出的:


color 
font (及其相关属性) 
letter-spacing 
line-height 
list-style (及其相关属性) 
text-align 
text-indent 
text-transform 
white-space 
word-spacing 

    在某些老式浏览器中,继承功能可能有些问题,然而大部分现代浏览器在这方面都处理得很正确。记住上面这个列表,可以让你少写点多余的代码。当然了,如果你想看看完整的列表,还是参考 CSS 2 Property Index。 

空白
    并非指的是 CSS 的  white-space  属性,这个属性早有确定的值了。我们说的是样式表本身含有的那些空白。空白常用于换行字符,和在一行里面用来改进可读性的空格。尽管把它们都删除可能会剩下个把字节,但好处毕竟有限。

    关键是,如果把它们都删除了,CSS 文件就会变得非常难读,更难修改。要是你真的打算这么做,不妨创建一个主 CSS 文件,再根据它生成一个删除了所有空白的副本,修改的时候只修改主文件,根据主文件重新生成一次副本就行了。

    请注意,CSS 编码中需要一些空白,删除那些必要的会导致你未曾预料的问题。如果 W3C 规范中用了 "space separated" 这样的语句,那么空格就不可省略。常见的像简记属性中分隔值的那些空格,还有 下降合并符 (descendant combinator),或者称为下降选择符,就是一个空格。所以说不到非用不可的时候,删除空白这样的方法还是少用。

完结

    你现在学会了好几种让你的样式表更高效的方法,益处是在这些技巧下,不仅下载时间被减少了,而且清晰、易于理解、更改的代码随之而来。就算你用排版工具来编辑样式表,也可以在最后用这些方法将其改定为高效的样子。

书写高效的CSS

  • 2011年12月22日 09:11
  • 66KB
  • 下载

在书写高效 CSS 时会有哪些问题需要考虑?

1.样式是:浏览器是从右向左来解析一个选择器的 2.ID最快,Universal最慢 有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal 3.不...

书写高效的CSS

这篇文章已经在草稿箱里放了好久,考虑一下还是发布吧。这是翻译的文章,原文在这里Efficiently Rendering CSS我们写的CSS有多高效?换个说法,浏览器渲染我们的CSS会有多快?我承认...
  • sibang
  • sibang
  • 2014年08月21日 16:41
  • 550

高效CSS选择符 - 这也许会颠覆你书写CSS的习惯

转载自:http://www.iamhoubiao.com/detail.php?i=19 关于前端性能一说,绝大多数的人都知道JS优化,DOM优化,但是你有没有考虑过CSS选择符优化?殊不知这...

高效学习CSS布局之道

  • 2017年11月26日 22:31
  • 63.77MB
  • 下载

CSS样式表高效使用的技巧

  • 2012年09月25日 16:35
  • 22KB
  • 下载

CSS高效开发实战笔记 123

第一章 CSS 3 与现代Web标准 第二章 温故知新--HTML、CSS基础 第三章 使用CSS选择器让样式表更健壮 第一章 CSS 3 与现代Web标准 未来web发展趋势: ...

高效学习CSS布局之道

  • 2014年07月03日 13:08
  • 3.66MB
  • 下载

高效学习CSS布局之道

  • 2010年01月19日 14:40
  • 571KB
  • 下载

利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作

作为一个Web前台设计人员,应该充分利用可利用的硬件条件及专业的软件工具,迅速地入到专业高效的氛围当中.实践中,我们可以利用扩展桌面双屏技术及Chrome浏览器快速剖析优秀网页Div及CSS构成,并快...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:书写高效的CSS
举报原因:
原因补充:

(最多只允许输入30个字)