重构那些事

做网页重构需要：

1. 还原设计稿视觉效果，并通过标准验证（HTML）

2. 在1的基础上，实现多浏览器的兼容（HTML）

3. 在2的基础上，标签语义化（HTML）

4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）

5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）

6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）

7. 在6的基础上，样式写法的优化（包括技巧的应用）

通俗的讲，我们大约需要做到以下几点：

1. 更改之前不合理的标签，使之语义化
2. SASS、LESS嵌套层次不超过三层，过了就要改或者at root
3. 类名，id名做到行为层和样式层分离，加各自的前缀区分
4. 加足规范注释
5. 尽量减少标签数量，自闭合标签无需闭合，如input、br、img、br、hr
6. HTML5规范中 disabled、checked、selected等属性不用设置值
7. 避免过分重排，常见重排属性：
   • width
   • height
   • padding
   • margin
   • display
   • border-width
   • position
   • top
   • left
   • right
   • bottom
   • font-size
   • float
   • text-align
   • overflow-y
   • font-weight
   • overflow
   • font-family
   • line-height
   • vertical-align
   • clear
   • white-space
   • min-height

6.Display 属性会影响页面的渲染，合理使用。

• display: inline后不应该再使用 width、height、margin、padding 以及 float；
• display: inline-block 后不应该再使用 float；
• display: block 后不应该再使用 vertical-align；
• display: table-* 后不应该再使用 margin 或者 float；
  7.优化CSS选择器，尽量避免使用消耗更多匹配时间的选择器，CSS 选择器是从右到左进行规则匹配。
• 避免使用标签或 class 选择器限制 id 选择器
• 避免使用通用选择器
• 避免使用多层标签选择器。使用 class 选择器替换，减少css查找
• 避免使用子选择器
• 使用继承

重构目标

• 标签语义化（HTML5）。
• sass嵌套层次过多（不能超过三层)，消除多余的id class等无用的css代码
• 样式层（.container），行为层(J_container)分离 eg: J_SiteFooter J_Module 参考淘宝
• 左右浮动分离（左边的向左浮动，右边的向右浮动），防止页面崩掉。电脑安装主流浏览器，测试每个页面是否崩掉。
• scss规范(看群里的scss全站设计PPT)重点
• 浏览器版本过低添加提升“升级您的浏览器”。
• css注释，所有需要导入的css加下划线前缀，看ppt规范。
• 鼠标手型。
• 图片的alt解释信息。
• 因设计或排版而没有完全显示出来的文字信息的title提示
• 网站logo的权重设置H1、网站主要标题、标识的权重设置H2-H6、stong、em、b等(对搜索引擎的友好可读性)

参考资料 http://ued.sina.com.cn/?p=868
http://ued.sina.com.cn/?p=726
http://ued.sina.com.cn/?cat=7
http://mxd.tencent.com/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB%EF%BC%9A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E9%87%8D%E6%9E%84%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF%E3%80%90%E5%9F%BA%E7%A1%80%E7%AF%87%E3%80%91%E5%8E%9F
http://tongji.baidu.com/data/browser