前端命名规范与代码规范（一）
2018-07-10 本文已影响105人
65_刘璐
HTML与CSS命名规范
1.所有命名都使用英文小写
2.命名用引号包裹
3.用中横线连接
4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
QQ截图20180710115024.png
常用id的命名：
(1)页面结构
-
容器: container
-
页头：header
-
内容：content/container
-
页面主体：main
-
页尾：footer
-
导航：nav
-
侧栏：sidebar
-
栏目：column
-
页面外围控制整体布局宽度：wrapper
-
左右中：left right center
(2)导航
-
导航：nav
-
主导航：mainbav
-
子导航：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
CSS书写规范
- css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等；其他属性包括: list-style(列表样式) ＆ vertical-vlign ＆ cursor ＆ z-index(层叠顺序) ＆ zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;
JS命名规范
-
js命名比较简单，现在大部分使用的是小驼峰和下划线命名。
-
jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;
-
类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
-
函数命名: 首字母小写驼峰式命名. 如iTaoLun();
