适用于小团队的前端规范示例

前端规范

适用于前端开发团队规范为参考规范，不全是硬性要求，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够获得沉淀，减少重复劳动。

访问地址：http://ku.zzfriend.com/yanshi/qianduanguifan/（点击阅读原文可下载）

演示：

示例：

书写规范

2.1样式与内容分离

2.1.1项目结构

---

|---- index.html 入口页

|---- js/ JS //具体见JS细化结构

|---- css/ CSS //具体见CSS细化结构

2.1.2修正步骤约定

index.html全部样式附件于注：此时文件中不包含任何一个id =“ xxx”class="xxx"

为上一步书写CSS样式

[至此重构完成]

开始书写js交互文件，使用ID和定位Class被操作句柄

向代码中需要的地方添加及[至此交互效果完成]index.htmlid="xxx"data-xxx="xxx"

2.1.3命名规范

文件及文件夹：全部英文小写字母+数字或连接符“ -，_”，不可出现其他字符如：../css/style.css, jquery.1.x.x.js

文件：调用文件需包含版本号，压缩文件需包含关键字，其他插件则可不包含如：/libsmin/libs/jquery.1.9.1.js /libs/modernizr-1.7.min.js fileuploader.js plugins.js

ID：加利福尼亚命名法＆小驼峰式命名法

如：firstName topBoxList footerCopyright

类别：[减号连接符]

如：top-item main-box box-list-item-1

尽量使用语义明确的单词命名，避免left bottom等方位性的单词

2.1.4格式和编码

文本文件：UTF-8 （无BOM）编码.xxx

图片文件：（PNG-24）（压缩率8-12）.png .jpg

动态图片：.gif

压缩文件：.tar.gz .zip

2.2 CSS细化规范

......更多请点击阅读原文下载查看

推荐阅读：

【怎样防止代码被抄袭】浅谈前端代码加密

前端设计开发常用命名规则

前端开发常用css动画代码（自己收藏用）

作者 | 大神神码 | 蚂蚁开源社区大神，资深前端工程师

觉得文章不错，点下在看

点击阅读原文，演示/下载demo源码

↓↓↓↓

http://bbs.zzfriend.com/thread-13675-1-1.html