CSS规范和样式重用的总结（2）

猫性男孩

七、IE私有特性1. expression

记住一句话：无论什么时候，都不要使用它。用 Javascript 吧。更优雅，更灵活。

2. filter

• 应该尽量避免使用 AlphaImageLoader
• 可以适当在投影/发光/渐变/去色方面上使用
  

3. IE bug

常见BUG，详见：http://sofish.de/1400

八、如何规划你的 CSS 文件结构1.一定要有全局设置

全局设置可以避免重复书写同样的东西。比如3人在一个项目中，假设项目中涉及到的链接有 10 种颜色，如果有全局重设，我们就可以统一设置颜色。如果没有，我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义，且定义不 统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以，在写之前，大家应该先分析视觉稿，统一全局设置。

/* global reset */ body{padding:0;margin:0;font.....} a{color:#07f;} a:hover{color:#555;}

需要注意的是，一般情况下，不要直接给标签写样式。而应该使用 class。像下面这种写法，并不是很合适:

h1{font-size:30px} h2{font-size:20px} h3{font-size:10px;}

如果有另外一个 h2 也要使用 10px 的，而其他的都仍使用 20px 的，那可就不好办了。所以，推荐用这种方法：

/* global classes */ .text-size30{font-size:30px;} .text-size20{font-size:20px;} .text-size10{font-size:10px;}

<h2 class="text-size20">… <h2 class="text-size10">…

2.一定要模块化

有两点需要注意的，一是，注意代码重用的模块化；一是，注意 HTML 结构的模块化，而不是分块。

• 我们是这样重用的：
  <div id="module-1" class="module"> <h3>TITLE</h3> <p class="module-item"> some text </p> </div> <div id="module-2" class="module"> < h3>TITLE</h3> <p class="module-item"> some text </p> </div>/* module, reuse style in module scrope*/ .module{} .module-status{} .module-item{} .module-status .module-1-item{} /* customize */ #module-1 .module-item{} #module-2 .module-item{}
• HTML 的模块化：我们应该这样写（他们的视觉是一体的，代码也应该是一体的）：
  <div id="module-1" class="module"> <h3>TITLE</h3> <p class="module-item"> some text </p> </div> <!-- #module .module -->
  而不是这样写：
  <h3>TITLE</h3> <!-- 第一块 --> <div id="module-1" class="module>    <p class="module-item"> some text </p> </div> <!-- 第二块 -->
  

九、值得注意的事1.Background Color:

• 一般我们都会写: background:url(path/to/image) no-repeat 0 0;
• 当元素背景是深色的时候，比如#000，我们通常会选择一种比较浅的颜色来做为文本的颜色，比如#fff，为了避免网速缓慢导致CSS已经 加载，而图片仍未加载完成或图片服务器挂掉时文本不可见，请尽量使用加上CSS定义的背景颜色，如：background:#e8edef url(path/to/image) no-repeat 0 0;
  

2. has Layout

别用轻易使用hack，IE下很多兼容性问题都是 has Layout 引起的。试着给元素加上:

display: inline-blockheight: (除 auto外任何值) width: (除 auto外任何值) float: (left或 right) position: absolutewriting-mode: tb-rlzoom: (除 normal外任意值)3. 代码测试:

一般情况下，我们需要测试通过的是电脑端的A-Grade浏览器：

	Win XP	Win 7	Mac 10.6.†	iOS 3.†	iOS 4.†	Android 2.2.†
Safari 5.†			A-grade
Chrome † (latest stable)	A-grade
Firefox 4.†		A-grade (upon GA release)	A-grade (upon GA release)
Firefox 3.6.†	A-grade	A-grade	A-grade
IE 9.0		A-grade (upon GA release)
IE 8.0	A-grade	A-grade
IE 7.0	A-grade
IE 6.0	A-grade
Safari for iOS				A-grade	A-grade
WebKit for Android OS						A-gradea