本文作者：大象
本文地址：http://www.cnblogs.com/daxiang/p/4661936.html
网页重构，如果要说什么地方难，那就只有一个：语义和命名。
一、结构上的标签语义
1、不带语义的语义：div块级元素，span行内元素；
2、其它带语义的：p段落，blockquote引用，h1~6标题，有序列表ol li，无序列表ul li，定义列表dl dt dd，一系列格式化文本的strong、em、i、sub、sup…
3、html5里常用的几个：header、footer、aside、nav、article、section、canvas、video…
合理使用语义标签，即使没有样式，机器(Search Engine)和人都能愉快的阅读。
二、标签属性class、id命名
1、提高重用性少用id；
2、一组命名要做到能顾名思义！或者能“望文生义”；
3、语义贴切、冲突几率、渲染性能、协作通畅；
4、只能是 [a-z\d\-] 英文字母+数字+字符“-”，用作脚本钩子的采用“J_”前缀；
5、"-"；作长命名时的“分类分隔符（如：tab-nav）”；功能上的“扩展分隔符（如：tab-trigger-active）”，
6、class命名
(1).模块名 ；
(2).模块名-模块状态 ；
(3).模块名-子模块名 ；
(4).模块名-子模块名-模块状态 ；
7、不能用“表象”的词命名，如：大小、颜色、方位…
8、id命名：帕斯卡命名法，CamelName
三、脚本部分
可参考“匈牙利法，小驼峰法，大驼峰法”，建议：
(1)常量 UPPERCASE_WORD；
(2)变量 camelName；
(3)类名 CamelName；
另附常用类命名(有更好的，可以交流)：
/* 结构性 */
.header { }
.container { }
.footer { }
/* 站点 */
.site-topbar { }
.site-header { }
.site-footer { }
.topbar-nav { }
.site-logo { }
.footer-service { }
/* 页面： 结构(头部、内容区域、尾部、悬浮挂件)、包裹、导航、搜索、面包屑导航 */
.page-header { }
.page-container { }
.page-footer { }
.page-pendant { }
.page-wrapper { }
.page-site-nav { }
.page-nav { }
.page-search { }
.page-breadcrumbs { }
.page-archive { }
.page-detail { }
/* 模块： 包裹、结构(头部、内容、面板、尾部) */
.module-wrapper { }
.module-header { }
.module-title { }
.module-container { }
.module-panel { }
.module-footer { }
/* 通用模块：模块组件的标题、内容区的标题、副标题 */
.title { }
.headline { }
.subheadline { }
/* 通用模块：手风琴 */
.tab { }
.tab-nav { }
.tab-trigger { }
.tab-trigger-active { }
.tab-container { }
.tab-panel { }
.tab-panel-active { }
/* 通用模块：选项卡 */
.accordion { }
.accordion-panel { }
.accordion-header { }
.accordion-header-active { }
.accordion-container { }
.accordion-container-active { }
/* 通用模块：图文结合，图在侧边 */
.media-side { }
.media-side .object { }
.media-side .caption { }
.media-side .abstract { }
.media-side .metadata { }
/* 通用模块：图文结合，文字覆盖在图上 */
.media-cover { }
.media-cover .object { }
.media-cover .caption { }
.media-cover .abstract { }
.media-cover .bg { }
/* 列表 */
.list { }
.list .item { }
.list-line .item { }
.list-style-dot .item { }
.list-ellipsis .item { }
.first-child .first { }
.last-child .last { }
/* 其它 */
.block-link { }
.inner-link { }
.tag { }
.hr { }
本文为原创文章，同时，某会更新知识点及修正错误，是以转载请务必保留原作者信息！
本文地址：http://www.cnblogs.com/daxiang/p/4661936.html