高质量代码之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;等

posted @ 2014-07-24 14:12  MissUU  阅读(238)  评论(0编辑  收藏  举报