团队命名规范

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

JS规范

1.HTML/CSS文件命名

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

<!-- HTML -->
fs.html
fsList.html
fsDetail.html
<!-- SASS -->
fs.scss
fsList.scss
fsDetail.scss

2.className命名

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

<!-- 这个是全站公用模块,祖先模块允许直接出现中线 -->
<div class="mod-info">
    <div class="mod-info-son"></div>
    <div class="mod-info-son"></div>
</div>

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

<div class="mod-info js-click-box">
    <div class="mod-info-son"></div>
    <div class="mod-info-son"></div>
</div>

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

<div class="mod-yours"></div>

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

<div class="paipai-mod-yours"></div>

3.ID的命名规范

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

<div id="add-btn"></div>

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
公共模块:
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模块:
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

4.js变量命名

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 87,438评论 13 122
  • 文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...
    二狗子没有夏天阅读 1,276评论 0 35
  • 众筹的前提是一群靠谱的熟人在一起对大家看好的项目进行筹人筹资的一种创业过程。所以就是能发挥专业人才的优势,使得资源...
    左晓芸阅读 51评论 0 0
  • 记录加反思改进完善生活 关键词:指南针 人生观工作观 时光日志 人生的指南针包含了两样东西——工作观和人生观,有了...
    韦子_阅读 23评论 0 0
  • 第一次在简书发文,分享一下我昨天的献血经历。 昨天,7月18日,我献了一次成分血。这是我第一次献成分血,之...
    zhipengcvn阅读 1,777评论 1 1