10个帮你减少CSS占系统资源的方法

  1）0 像素边框。很多时候，当我们写样式，无边框都喜欢用 border:0; 来实现，但或许您并不知道，border:0; 只是定义边框宽度为零，而边框样式、颜色还是会被浏览器所解析，有解析势必占用资源，这是我们需要回避的。所以，当下回你再打算定义无边框时，建议你选择 使用 border:none; 来实现。
    2）* 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管正在用的还是不用的，过时的还是先进的，都一
视同仁。这样，也是大大滴占用资源哦。要有选择地初始化标签，慎重使用 * 通配符。
    3）当需要使用图片来平铺背景时，这个背景图片并非越小越好。这 正是为什么许多人都不用 1px 的原因。算一下吧！宽*高=1px*1px 的图片，平铺出一个 宽*高=200px*200px 的区域，需要 200*200=40,000 次，如此能不占用资源吗？更何况一个页面宽*高的尺寸岂止只有 200px*200px ？算起来很惊人哦。
    4）十六进制颜色代码的写法。对于这个，不少同学都习惯了缩写或小写。但你有所不知的是，缩写或小写其实并非推荐的写法。缩写或小写虽然为的是减少解析所占用的资源，但同时它们也会增加文件体积。孰优孰劣，尚有待进一步考证。
    5）样式内嵌，放置位置不妥。内嵌样式是不明智的，尽管目前很多超级门户站都喜欢内嵌，但你的站毕竟不是超级门户，所以还是规矩一点儿吧，用外链的形式调用。另外，样式调用最好出现在脚本顶部（即通常所说的HEAD区），别特立独行玩个性哦！要是脚本在上，样式在下，有什么负作用呢？自己想吧！
    6）尽量使用 PNG 。PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。我知道你会说，IE6 对 PNG 的透明效果支持不好，可是，现在 IE6 不是快被无视了吗？目光要朝前看。
    7）不要用 CSS 表达式；使用引用样式表，坚决不要通过 @import 导入。CSS 表达式有啥不好？这估计得内行的人才知道。浅显点儿说吧，下面给出的是一个用 CSS 表达式设置背景颜色的例子——
[indent]background-color:#B8D4FF; //传统的静态设置方式
background-color:expression((new Date()) . getHours % 2 ? "#B8D4FF" : "#F08A00"); //CSS表达式将背景颜色设置为每小时变化一次
[/indent]
      可以看到，所谓的CSS表达式，就是在 expression 方法中接受一个 JavaScript 表达式。CSS 属性将被设置为对 JavaScript 表达式求值的结果。而表达式的问题就在于对其进行的求值频率比人们期望的要高。它们不止在页面呈现和大小改变时求值，甚至当页面滚动，用户鼠标在页面上移 过都要求值。统计显示，正常的用户浏览页面的操作一分钟内可让求值次数达到一百万次之多。2G 内存的电脑，在使用了 CSS 表达式的页面上移动鼠标（还没移动到超链接上去）就可以让 CPU 使用从 0% 上升到 35% 。而正常的页面，就算达到我 APM 的极限，在超链接和非超链接之间移动鼠标，也只能让 CPU 使用上升至 30% 。而若是没有超链接，则相应的值是 5% 。
    但是有时候，就是得有样式动态变化（基于用户的操作）的需要。那我们可以利用一次性表达式或事件处理器来实现。