缘起
去年在接手大量外包老项目之后。。。被各种随意的命名冲瞎了眼睛。。
- 中文+数字 e.g:biao1
- 中文+英文 e.g:zhongContent
又看到一些自己以前比较随意的命名方式：
- contentLeft
- boxRight
所以觉得认真总结出一些组件布局命名规范来。
web语义化
什么是语义化？其实简单说来就是让爬虫更好抓取分析HTML，机器可以更好地读懂内容。
静态网站推荐直接使用语义化标签
特别是开发公司备案网站和公司官网的时候就非常合适。
<body> <article > <header>页头</header> <nav> 导航 </nav> <aside>侧边栏</aside> <main> 主内容 <section></section> </main> <footer>页脚</footer> </article> </body>
效果如图
前端命名规范
整体使用驼峰命名法。
HTML通用命名
- 容器: container
- 页头：header
- 主体：main
- 内容：content
- 页尾：footer
- 导航：nav
- 侧边栏：sidebar
- 左右中：left right center
可以根据父子层级，位置，功能划分
- subNav
- navBtn
- loginBar
组件命名
全局组件
规则：global+'组件名'
例子：globalNotice
页面组件
规则：'组件名'+ Page
例子：userPage
功能模块组件
规则：'功能名'+ Component
例子：loginComponent
页面内特殊组件
规则：‘页面组件名’+'特色组件名'
例子：userPageSearchBtn
通用型组件尽量采用功能性的命名方法。
