CSS架构：最新最佳实践(2)_H5之家 - 中国HTML5教程资源分享第一站

如果是这样，看看这样是不是好点：图标应该使用一个图标(icon)元素，可以使用标签。随着在Twitter Bootstrap中使用，这个方法已经越来越流行了。

23 comments ... .icon { background-image: url( sprites.png ); } .icon-comments { background-position: 0 -30px; }

使用标签比使用标准的标签更有语义，并且可以容易的找到页面中图标的位置。

使用CSS3

网站经常在一些元素上使用图片，但这并不是必须的，这样使页面图片变得臃肿。使用CSS3可以极大的有助于消除这些图片，同时为网站转向响应式设计做好准备。对大多数网站来说，任何圆角、阴影、文字阴影、渐变和box-sizing的实例都是CSS3的一个福音。

但是，CSS3有两个消极点：首先，CSS3规范的很多部分没有确定，因此现代浏览器对CSS3的属性需要加上浏览器前缀。其次，CSS3不被流行的旧浏览器支持，这样的话就需要可靠的机制或者辅助脚本。

CSS3兼容性

很不幸，旧版本的IE和CSS3存在最大兼容性问题。当前，CSS3只有部分属性被IE9支持（最明显的就是CSS3选择器，可以查看HTML5和CSS3支持，获取最新的支持列表），IE6到IE8完全不支持。如果你打算使用任何CSS3属性，对使用IE9，IE8或者更低版本的用户来说，我推荐安装合适的可靠的处理机制。

很幸运，有一些脚本可以使用，达到效果。以下这些脚本有助于CSS3在IE里得到支持。

IE9.js.这里有一个IE9.js影响的属性和问题修正的解释。
Selectivizr
CSS3 Pie
Modernizr

这些脚本不好的一面就是会增加页面的大小和加载事件，但是这个代价是值得的。

扩展阅读

CSS3 Solutions for Internet Explorer
CSS3 For Internet Explorer: Handy Compatibility Tools and Resources
Shims: Four Ways To Make IE Support CSS3
LES FONCTIONNALITS CSS3 AVEC INTERNET EXPLORER

——大漠

CSS3工具

CSS3概述和哪些属性可以放心的使用可能是另一篇文章要谈论的。使用CSS3最重要的步骤之一是要紧跟最新规范和浏览器实现规范的变化。跟踪这些变化可能有点痛苦，所以我建议使用和网站了解最新的语法变化和浏览器支持情况。对大多数的属性，CSS3, Please!是个超级棒的网站资源。对于渐变，Ultimate CSS Gradient Generator是一个非常不错的工具，它可以生成合适的、具有良好支持的渐变代码。

如果你自己特别懒，不想记住怎么写浏览器前缀，Prefixr会帮你在代码里添加的。你也可以使用由Lea Verou写的prefix-free，在服务器上上传了这个脚本后，就会在你的代码里添加所有的前缀。

扩展阅读

W3CPLUS经过一段时间的整理与积累，在CSS3工具一文中收录了有关于CSS3和前端方面的九十多个在线工具，这些工具可以帮助大家高效的实现一些CSS3的效果。

——大漠

制定网格

如果你的网站目前还没有建立一个网格系统，从此你必须敦促自己建立一个。如果你的代码有大量width、margin、padding的实例，并且相同大小的元素间不在相同的尺寸内，那么你的网站早就需要一个网格系统了。

你可以使用你自己的元素尺寸建立一个网格系统，或者你也可以使用一个CSS网格框架（很多CSS网格框架，使用任何一种都行，甚至可以使用一个响应式的框架）。

扩展阅读

CSS布局——960gs
30+ CSS Grid System
8个实用的响应式设计框架
Metro网格系统
Responsive Design资源之三——布局
16个优秀的Responsive CSS框架
CSS3 Grid Layout
Grid

——大漠

使用Box-sizing

如果你自己制作属于自己的网格系统，一个非常有用的CSS属性是box-sizing。Box-sizing可以改变浏览器计算一个盒元素尺寸的方式，这是专门用来处理尺寸大小的，特别是布局和网格。

Box-sizing是参照众所周知的“IE盒模型“来计算元素盒子的尺寸的，IE盒模型认为盒子的尺寸包括padding值。那就意味着当元素同时定义了width和padding时，盒子的宽度应该等于width值，而不是width加padding的值。如下图所示：

CSS架构：最新最佳实践

上图是W3C盒模型和IE盒模型对比

使用box-sizing:border-box(根据W3C盒模型，默认的是box-sizing:content-box)使计算布局更容易，从中可以得到真正的恩惠。Box-sizing属性也需要加上前缀。

扩展阅读

CSS3 Box-sizing
* { Box-sizing: Border-box } FTW
Controlling width with CSS3 box-sizing
Take Control of the Box Model with box-sizing
CSS3 box-sizing attribute

——大漠

制作流体网格和图片

建立网格的最后一个方面（如果你提前想到了未来友好的设计）就是将固定的像素网格转换成百分比（或者em）。决定百分比大小的最好方式是采用Ethan Marcotte的响应式网站设计黄金法则：target=content/context。很感激，有计算器可以帮计算RWD网格的尺寸。我推荐一个工具RWD Calculator。

对友好设计同样重要的是使图像自适应容器的大小。实现的主要方法是下面一行简单的代码：

img { max-width: 100%; height: auto; }

这样，图像在流式容器里就不会超出或缩小。

别忘了HTML5

最后，总得来说HTML5对所有网站升级是绝对重要的。问题的关键不再是一个网站决定实现HTML5，而是何时能实现。我觉的HTML5有几个方面对任何使用的人都有用，在一定程度上奠定了响应式设计的基础，但是，最容易开始的地方就是使用HTML5 文档声明。作为指明文档规范的指令，HTML5 doctype可以快速改变页面模板和实现文档重构。

<!DOCTYPE html>

在你的文档里不需要改变什么，因为Doctype是向后兼容的，如果使用了任何HTML5标签，他们也会起作用的。