css架构学习中，待更新中

http://www.w3cplus.com/css/css-architectures-new-best-practices.html转载！

使用Normalize.css重置默认样式

它具有以下优点，不仅仅是CSS样式重置：

不像其他CSS resets，normalize.css保存了有用的默认设置

大范围的规范了HTML元素样式

纠正了浏览器间的一些bug及不一样的表现形式

精心的改进提高了可用性

使用详细的注释解释了代码的作用

使用normalize.css替代一个标准的reset会使你编写正确的代码，在重新设置基本样式上节省大量的时间。

使用clear fix清除浮动

图片替代文字

使用图片代替文字的CSS技术在前端开发有着悠久辉煌的历史。在2012年3月，Jeffrey Zeldman引进了一个新的技巧，称为 Kellum方法。不是使用-9999px hack使文本超出屏幕达到隐藏文本的目的，他的技术在隐藏文本的同时保留了文本在屏幕范围之内。

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}   

这种方法提高了性能，特别在平板电脑和更小的屏幕设备上更显著

制作原理：

使用图片替换文本，其原理是相当的简单：

就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的

图片替换文本的制作方法。

使用图标元素

使用CSS3

CSS3兼容性