移动前端开发规范（一般规范）

系列目录

移动前端开发规范（一般规范）
移动前端开发规范（技术栈规范）
移动前端开发规范（HTML规范）
移动前端开发规范（JavaScript规范）
移动前端开发规范（CSS/LESS/SCSS规范）
移动前端开发规范（前端自动化规范）

为了规范前端团队的开发模式，提高代码质量及协作效率，优化前端性能及用户体验，特制定该前端技术规范文档，其中包括了前端技术栈，HTML，JavaScript，CSS/LESS/SCSS和前端自动化这几个部分。供前端同事参考及开发践行。

一般规范

以下列举了一些可应用在 HTML，JavaScript 和 CSS/LESS/SCSS 上的通用规则。

文件和资源命名

• 在前端项目中，所有的文件名应该遵循统一命名约定。以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符，如：
  example.com/my-blog-entry or img.example.com/big-black-background.jpg
  所以，请使用减号用来分隔资源名称。

• 请确保文件命名总是以字母开头而不是数字。

• 资源的字母名称必须全为小写。这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。

• 在某些情况下，需要对资源文件增加后缀或特定的扩展名（比如 .min.js, .min.css）。这种情况下，建议使用点分隔符来进行处理。

不推荐：
MyScript.js
myCamelCaseName.css
i_love_react.html
1001-scripts.js
my-file-min.css

推荐：
my-script.js
my-camel-case-name.css
i-love-react.html
thousand-and-one-scripts.js
my-file.min.css

协议

不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，或者样式和脚本时，url 所指向的具体路径，不要指定协议部分（http:，https:），除非这两者协议都不可用。

不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

不推荐：

推荐：

不推荐：
.example { background: url(http://static.example.com/images/bg.jpg); }

推荐：
.example { background: url(//static.example.com/images/bg.jpg); }

缩进

由于广为人知的兼容性，请勿使用tab进行代码缩进。推荐使用空格进行缩进，一次缩进两个空格。
推荐：

• Fantastic
• Great
• Test

@media screen and (min-width: 1100px) { body { font-size: 100%; } }

(function(){ var x = 10; function y(a, b) { return { result: (a + b) * x } } }());

注释