高质量代码之HTML、CSS篇

HTML篇

1. 使用语义化标签<strong><fieldset><legend><ul>等等，少用<div><span>
2. 判断网页标签语义化是否良好的方法：去掉样式，看看网页结构是否依然有序。
3. 当页面内标签无法满足设计时，才会适当添加div和span
4. 少用纯样式标签b font u等，改用strong em等
5. 即可以用div又可以用p时，尽量使用p

CSS篇

1. CSS结构

一般分为base common page三个层次。

base层：提供CSS Reset功能和粒度最小的通用类。被所有页面所引用，相对稳定，基本不用维护；

common层：提供组件级的CSS类。即模块化后的CSS类。

拆分模块技巧：1）模块与模块之间尽量不要包含相同的部分，如果有，应拆分出来，成为一个独立的模块。

2）模块应该保证数量尽可能少的原则下，做到尽可能简单

page层：网页中非高度重用的模块。

2.   CSS命名空间

驼峰命名法与下划线“-”或“_”命名法

一般情况下，驼峰法用于区分不同单词，下划线用于表明从属关系。如timeList/timeList-lastItem

通过给body定义class,该页面样式均包含在这个class里面以防止重复定义

3.   多用组合，少用继承

合理利用多个类进行定义

4.   如果处理上下margin

如果不确定模块上下margin，最好不要把它写到模块的类里，而是使用类的组合，单独定义原子类（如mt10代表margin-top:10px的类）。最好不要混用margin-top和margin-            bottom

5.   低权重原则-避免过多嵌套

少使用子选择器，CSS选择符权重尽可能低；尽量多用class，少用id

6.   CSS sprite

1）只适用于背景的图片，对<img src=""/>设置图片不适用

2） 横向纵向都平铺的图片不适用，如果是横向平铺，sprite图应该竖直排练，反之亦然

7.   CSS hack

_ IE6  * IE6/IE7  \9 IE8;尽量少用hack

8.   hover样式

l(link)ov(visited)e h(hover)at(active)e

9.   hasLayout触发

zoom：1；或 postion:relative；等