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

特别声明：此篇文章由Jekst根据Denise Jacobs的英文文章原名《CSS Architectures: New Best Practices》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：以及作者相关信息

——作者：Denise Jacobs

——译者：Jekst

大家都已意识到了，在过去的几年里，前端开发领域取得了很大的进展，一些新的思想已经实践出新的方法来解决由来已久的问题。本文介绍了前端编程一些最新最佳的实践方法，很大程度上能够帮助大家编写良好的样式表和HTML文件。

使用Normalize.css重置默认样式

CSS重置有助于根据所有设置的样式建立一个基准样式。样式重置有效重写了浏览器某些元素（在浏览器里有很大的不同）默认的样式。尽管CSS resets在过去的几年里很受欢迎，但是，很多网站至今也没有使用，这些网站CSS的可扩展性因此会有很大的困难。

大多数人推荐使用normalize.css重置默认样式，而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式，而不是重置了这些元素的基本样式。可以参考github上normlize.css项目，它具有以下优点，不仅仅是CSS样式重置：

不像其他CSS resets，normalize.css保存了有用的默认设置
大范围的规范了HTML元素样式
纠正了浏览器间的一些bug及不一样的表现形式
精心的改进提高了可用性
使用详细的注释解释了代码的作用

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

扩展阅读

USE NORMALIZE CSS, NOT RESET CSS
Reset CSS with Normalize.css
Normalize.css for a better cross-browser styling consistency
15 Best CSS Practices to Make Your Life Easier
CSS Resets: Normalize vs. Yahoo
Applying Normalize.css Reset – Quick Tip

——大漠

使用clear fix清除浮动

如果你还在你的文档中使用下面列出的方法来清楚浮动，那我们真的需要谈谈了：

<div></div> ... .clear { clear: both; }

推荐使用其他清除浮动的方法，而不是这个。这个方法是在大概10年前，CSS浮动布局第一次开始使用的时候设计出来的清除浮动的方法之一。

在HTML5 Boilerplate里使用的Micro Clearfix是最新、兼容性最好、前端编码里最好的实践方法。Micro Clearfix支持firefox 3.5、safari 4、chrome、opera 9、IE6及以后的版本。这里有个例子：

/* 现代浏览器 */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* IE 6/7浏览器 (触发hasLayout) */ .cf { *zoom:1; }

清除浮动类.cf应该被加在所有包含浮动元素的元素上。在这种情况下，旧式的空div带有clear样式的元素（<div class=”clear”></div>）可以永远从你保留的方法里退出了。

使用overflow：hidden怎么样呢？

另一个清除浮动流行的技术是使用overflow：hidden。因为在IE7及以下版本里使用overflow：hidden时有时会有问题，所以Micro Clearfix是最强烈推荐使用的。

尽管使用overflow：hidden几乎是每个人目前最喜欢的清除浮动的技术，但它会引起诸如下面的一些问题：

当浏览窗口比它容器小时，容器不会出现滚动条，这样会隐藏容器内的内容和子元素。
对margin、border、outline和绝对定位的png图片产生干扰。
影响CSS3属性的应用，比如box-shadow，text-shadow，transform等。

HTML5 and CSS3 for the Real World一书的合著者Louis Lazaris暗示使用overflow：hidden在复杂布局里会引起问题，推荐避免使用它，支持使用Micro Clearfix。

如果你还是决定使用“overflow:hidden”来清除浮动，建议你使用下面的版本，这可保障在IE下触发hasLayout：

.container { overflow: hidden; /* 清除浮动! */ zoom: 1; /* IE触发"hasLayout"*/ display: block; /* 包含内容的元素是块元素.除非元素默认是块元素*/ } 空div

说道不正确的使用空div，你应该停止使用作为页面的分隔符的、带有clear和边框的空<div>。

<div></div> ... div.divider { border-top: 1px solid #ABAA9A; clear: both; }

是的，你知道这段代码作为清晰的可视化的页面分隔符确实不错，但是它缺少语义。 OOCSS创始人、CSS大师Nicole Sullivan建议使用<hr>元素分割页面不同的部分，并且给<hr>元素加上一些必要的样式。

所以你应该使用下面的代码，而不是前面提到的：

<hr> ... .divider { border-top: 1px solid #ABAA9A; clear: both; } 扩展阅读

Clear Float
那些年我们一起清除过的浮动
A new micro clearfix hack
clear your floats - the right way
Clearing Floats: Why is it Necessary Even in “Modern” Browsers?
Simple Clearing of Floats
Page layout with floats and clearing
CSS CLEARFIX FOR FLOATING ELEMENTS
CSS Fundamentals: Containing Children
Lessons Learned Concerning the Clearfix CSS Hack

——大漠

图片替代文字

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

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

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

扩展阅读

十种图片替换文本CSS方法
可用性更好的CSS隐藏文字技术(CSS图片替换文字)
Nine Techniques for CSS Image Replacement
Another CSS image replacement technique
My thoughts about the latest Image Replacement techniques

——大漠

使用图标元素

在你的页面里，你可能会使用<span></span>作为一种放置图标的方式，就像这样：