标签：
本文作者：大象
本文地址：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)和人都能愉快的阅读。
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
标签：
原文地址：http://www.cnblogs.com/daxiang/p/4661936.html
