高质量代码之HTML、CSS篇
HTML篇
- 使用语义化标签<strong><fieldset><legend><ul>等等，少用<div><span>
- 判断网页标签语义化是否良好的方法：去掉样式，看看网页结构是否依然有序。
- 当页面内标签无法满足设计时，才会适当添加div和span
- 少用纯样式标签b font u等，改用strong em等
- 即可以用div又可以用p时，尽量使用p
CSS篇
- 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；等
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
