Web前端命名规范

对于经验资深的前端ER，在给Web布局时，相信都会很注重标签和命名的规范。尤其是随着HTML5的普及发展，更是把Web前端语义化推向一个新的台阶上。比如HTML5给我们新增的语义标签：header、nav、main、aside、footer、section、article等等。那么对于Web语义化，有什么优势呢？

一个得到广泛推崇的东西，必然有它的优势所在。Web语义化：

1、可以让人一目了然这块是什么鬼，那块是什么鬼，对于项目的维护或者优化都是非常有意义的。

2、随着HTML5语义化标签的出现，我推测以后Web语义化对于SEO优化，还是非常有利的。也就是说，seo优化，必然也要考虑web语义化。如：<header></header>可以很好的代替传统的
<div id="header"></div>。

那怎样愉快的玩耍Web语义化呢？

1、标签语义化，如在合适的地方用合适的语义化标签，如头部可用<header>、尾部可用<footer>；

2、命名语义化，包括HTML的id和class的命名，javascript相关命名；如#header{}、.footer{}、等。

下面是常见的命名参考规范：

一、主体

头部：header     内容：content/container   尾部：footer      导航：nav    侧栏：sidebar

栏目：column    整体布局：wrapper      左右中：left / right / center     登录条：loginbar
标志：logo     广告：banner         页面主体：main       热点：hot     新闻：news

下载：download   子导航：subnav        菜单：menu       子菜单：submenu    搜索：search

友情链接：friendlink   页脚：footer    版权：copyright    滚动：scroll       标签页：tab

文章列表：list     提示信息：msg      小技巧：tips    栏目标题：title      加入：join

指南：guild       服务：service      注册：regsiter   状态：status        投票：vote      合作伙伴：partner

二、css注释的写法

如内容区，Html注释的写法 ：<!--header头部-- >

三、id的命名规范

1、页面结构

   容器: container    页头：header    内容：content/container    页面主体：main     页尾footer 
 导航：nav        侧栏：sidebar   栏目：column          页面外围控制整体布局宽度：wrapper
 左右中：left right center

2、导航
 导航：nav                      主导航：mainnav       子导航：subnav               顶导航：topnav       边导航：sidebar
 左导航：leftsidebar       右导航：rightsidebar    菜单：menu                 子菜单：submenu       标题: title
 摘要: summary

3、功能
 标志：logo                 广告：banner           登陆：login              登录条：loginbar     注册：regsiter搜索：search              功能区：shop            标题：title                加入：joinus            状态：status
 按钮：btn                    滚动：scroll           标签页：tab               文章列表：list          提示信息：msg当前的: current          小技巧：tips              图标: icon                  注释：note              指南：guild
 服务：service             热点：hot                新闻：news              下载：download       投票：vote
 合作伙伴：partner       友情链接：link      版权：copyright
 

 

4、class的命名:

    (1)颜色：使用颜色的名称或者16进制代码，如：

   .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

    (2)字体大小，直接使用“font+字体大小”作为名称，如：

   .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

    (3)对齐样式，使用对齐目标的英文名称，如：

  .left { float:left; } .bottom { float:bottom; }

    (4)标题栏样式，使用“类别+功能”的方式命名，如：

  .barnews { } .barproduct { }
 

 

5、注意事项：

     （1）一律小写；

  （2）尽量用英文；

  （3）尽量不加中杠和下划线；

  （4）尽量不缩写，除非一看就明白的单词，如：wrapper可以写成wrap。

  （5）css文件命名规范：

主要的 master.css；  模块 module.css；  基本共用 base.css；   布局，版面layout.css；

主题 themes.css；   专栏 columns.css；  文字 font.css；     表单 forms.css；

补丁 mend.css；     打印print.css