要想成为前端大神,那些你不得不知晓的web前端命名规范

一、Web语义化

1.1 H5的语义化

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

1.2 语义化优势

1.可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的。
2.语义化能提高页面SEO。如:<header></header>可以很好的代替传统的<div id="header"></div>

1.3 语义化使用规则

1.标签语义化,如在合适的地方用合适的语义化标签,如头部可用<header>、尾部可用<footer>
2.命名语义化,包括html的id和class的命名,javascript相关命名;如#header{}、.footer{}、等。

二、命名规范

2.1 常见的命名参考规范

在开发的时候,经常会因为元素命名而头疼,无论是CSS样式命名还是现在很经常接触到的自定义组件命名. 下面整理一些常用的命名参考规范:
头部: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

2.2 id的命名规范

页面结构类
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航类
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
功能类
标志: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

2.3 class/css的命名

颜色:使用颜色的名称或者16进制代码,如:

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

字体大小,直接使用“font+字体大小”作为名称,如:

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

对齐样式,使用对齐目标的英文名称,如:
.left { float:left; } .bottom { float:bottom; }
标题栏样式,使用“类别+功能”的方式命名,如:

1
2
.navnews { }        //导航栏: 新闻
.navproduct { } //导航栏: 产品

2.4 其他
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
但是我们经常在SPA开发过程中, 会在命名好的(组件)文件夹里直接通过index.js index.less表示