团队命名规范

版本号 作者 时间 版本 内容摘要
v1.0 eleven 2018-05-16 1.0.0 文档初始化

JS规范

1.HTML/CSS文件命名

确保文件命名总是以字母开头而不是数字,且字母一律小写,以驼峰格式命名,如:


fs.html
fsList.html
fsDetail.html

fs.scss
fsList.scss
fsDetail.scss

2.className命名

ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “-” 连接


在jq或原生开发中,当某个className需要作为选择器使用时,className必须以‘js-’开头

模块命名
全站公共模块:以 mod- 开头

业务公共模块:以 业务名-mod- 开头

3.ID的命名规范

当需要命名id时,下面事例是新增按钮的id命名

4.className常用命名推荐

  • about 关于
  • account 账户
  • arrow 箭头图标
  • article 文章
  • aside 边栏
  • audio 音频
  • avatar 头像
  • bg,background 背景
  • bar 栏(工具类)
  • branding 品牌化
  • crumb,breadcrumbs 面包屑
  • btn,button 按钮
  • caption 标题,说明
  • category 分类
  • chart 图表
  • clearfix 清除浮动
  • close 关闭
  • col,column 列
  • comment 评论
  • community 社区
  • container 容器
  • content 内容
  • copyright 版权
  • current 当前态,选中态
  • default 默认
  • description 描述
  • details 细节
  • disabled 不可用
  • entry 文章,博文
  • error 错误
  • even 偶数,常用于多行列表或表格中
  • fail 失败(提示)
  • feature 专题
  • fewer 收起
  • field 用于表单的输入区域
  • figure 图
  • filter 筛选
  • first 第一个,常用于列表中
  • footer 页脚
  • forum 论坛
  • gallery 画廊
  • group 模块,清除浮动
  • header 页头
  • help 帮助
  • hide 隐藏
  • hightlight 高亮
  • home 主页
  • icon 图标
  • info,information 信息
  • last 最后一个,常用于列表中
  • links 链接
  • login 登录
  • logout 退出
  • logo 标志
  • main 主体
  • menu 菜单
  • meta 作者、更新时间等信息栏,一般位于标题之下
  • module 模块
  • more 更多(展开)
  • msg,message 消息
  • nav,navigation 导航
  • next 下一页
  • nub 小块
  • odd 奇数,常用于多行列表或表格中
  • off 鼠标离开
  • on 鼠标移过
  • output 输出
  • pagination 分页
  • pop,popup 弹窗
  • preview 预览
  • previous 上一页
  • primary 主要
  • progress 进度条
  • promotion 促销
  • rcommd,recommendations 推荐
  • reg,register 注册
  • save 保存
  • search 搜索
  • secondary 次要
  • section 区块
  • selected 已选
  • share 分享
  • show 显示
  • sidebar 边栏,侧栏
  • slide 幻灯片,图片切换
  • sort 排序
  • sub 次级的,子级的
  • submit 提交
  • subscribe 订阅
  • subtitle 副标题
  • success 成功(提示)
  • summary 摘要
  • tab 标签页
  • table 表格
  • txt,text 文本
  • thumbnail 缩略图
  • time 时间
  • tips 提示
  • title 标题
  • video 视频
  • wrap 容器,包,一般用于最外层
  • wrapper 容器,包,一般用于最外层

3. 图片命名

图片业务(可选) +(mod_)图片功能类别(必选)+ 图片模块名称(可选) + 图片精度(可选)

  • 图片业务:
  • pp_:拍拍
  • wx_:微信
  • sq_:手Q
  • jd_:京东商城

图片功能类别:

  • mod_:是否公共,可选
  • icon:模块类固化的图标
  • logo:LOGO类
  • spr:单页面各种元素合并集合
  • btn:按钮
  • bg:可平铺或者大背景

图片模块名称:

  • goodslist:商品列表
  • goodsinfo:商品信息
  • userava tar:用户头像

图片精度:

  • 普清:@1x
  • Retina:@2x | @3x
公共模块:
[email protected]
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模块:
[email protected]
wx_btn_goodlist.png
btn_goodlist.png

4.js变量命名

引入的第三方库以——连接,自己本地的以驼峰式命名

你可能感兴趣的:(团队命名规范)