来了来了，前端规范，无规矩不成方圆目录 javascript规范项目文件目录命名规范 css使用规范 less规范 1

命名函数方法常用动词 get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集

常量命名 全部大写如: LINE_COLOR

字符串 统一使用单引号，为了避免动态创建HTML 字符串时单双引号冲突

优先使用ES6以上的语法

条件判断和循环最多三层

2.项目文件目录命名规范

目录命名： 全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。

（特殊：VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名）

例：scripts， styles， components，images， utils，layouts，demo-styles，demo-scripts， img，doc

JS、CSS、SCSS、HTML、PNG 文件命名： 全部采用小写方式，以中划线分隔

例：render-dom.js / signup.css / index.html / company-logo.png

3.css使用规范

命名：

类名使用小写字母，以中划线分隔。
id采用驼峰命名，如 flowChart
scss 中的变量、函数、混合、placeholder 采用驼峰式命名

尽量使用缩写属性：

如border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

省略0后面的单位

常用类名相关，参考阿里

4.LESS规范

组织 将公共less 文件放入style/less/common文件夹例如：common.less

common.less中引入按以下顺序

@import
变量声明
样式声明

如： @import "mixins/size.less";

@default-text-color: #333;

.page { width: 960px; margin: 0 auto }

避免嵌套层级过多 最多3级，防止嵌套过多渲染性能降低

来了来了，前端规范，无规矩不成方圆

目录

1.javascript规范

2.项目文件目录命名规范

3.css使用规范

4.LESS规范