一、重置默认样式
normalize.css
①不像其他CSSreset，它保存了一些有用的默认样式。
②规范了大量样式，纠正了一下bug与表现形式。
③有详细的注释解释代码的作用。
二、清除浮动
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
/* For IE6-7: */
.cf {*zoom:1;}
★使用overflow:hidden;清除浮动的弊端：
①当窗口小于容器时，无滚动条，隐藏内容与子元素。
②干扰margin、border、outline 和 绝对定位的png图片。
③影响CSS3属性的应用，如box-shadow、text-shadow、transform等。
【即使非得使用，也应该确保触发hasLayout——zoom:1;】
三、图片替代文字
Kellum方法：在隐藏文本的同时保留了文本在屏幕内。而不是以前的-9999px(hack)。
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
提高性能，特别是平板电脑或小屏幕设备。
四、图标元素
当需要设置一个元素的背景图片，作为一个图标显示时，比起<span>等元素，<i>元素更具语义。
五、使用CSS3
CSS3有两个消极点：许多规范未确定需要前缀；旧浏览器不支持。
（1）CSS3兼容性
CSS3新属性最新支持列表：
通过JavaScript插件实现IE6~IE9对CSS3特性的支持：
①IE9.js.这里有一个IE9.js影响的属性和问题修正的解释。
②Selectivizr
③CSS3 Pie
④CSS Sandpaper
⑤Modernizr
虽然增加了页面的大小和加载事件，但这个代价值得。
（2）CSS3工具
查看HTML5与CSS3最新规范与支持度：http://html5please.com、http://css3please.com/
渐变工具：Ultimate CSS Gradient Generator
W3cplus整理了九十多个前端工具：《前端工具》
六、流体图片【常用于响应式布局】
七、HTML5文档声明
HTML5的文档声明能快速改变页面模板和实现文档重构。
在IE6~IE8用条件注释引入脚本<HTML5-Shiv>，可使旧浏览器正确呈现元素。
本文整理自：http://www.w3cplus.com/css/css-architectures-new-best-practices.html