高质量代码之HTML、CSS篇

时间:2023-03-10 08:37:30
高质量代码之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;等