前端开发规范— 命名、HTML、CSS、JS（上）本文已参与「新人创作礼」活动，一起开启掘金创作之路。团队间的开发，为

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在前端开发过程中，每个人可能都有自己的开发习惯，但团队间的开发，为了更好的进行代码管理和维护迭代，最好是做统一的开发规范。

下面给大家介绍下之前团队统一的开发规范！

1、命名规范

文件资源命名

文件名不得含有空格和特殊字符；

文件名建议只使用小写字母，不使用大写字母；( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。)

文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。

变量命名

命名方式 : 小驼峰式命名方法

命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

2、注释规范

单行注释

· 单独一行：//(双斜线)与注释文字之间保留一个空格

· 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

· 注释代码：//(双斜线)与代码之间保留一个空格。

多行注释

· 若开始(/和结束(/)都在一行，推荐采用单行注释

· 若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格。

3、HTML规范

文档规范

使用 HTML5 的文档声明类型 :

脚步加载

兼容老旧浏览器(IE9-)时：脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。

现代浏览器中：脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。综上所述，所有浏览器中推荐:

只兼容现代浏览器推荐:

语义化

简单来说就是用正确的标签干正确的事，而不是只有div和span。使用语义化标签有利于SEO。

alt标签不为空

标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

· 网速太慢

· src 属性中的错误

· 浏览器禁用图像

· 用户使用的是屏幕阅读器

从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容。

结构、表现、行为三者分离

尽量在文档和模板中只包含结构性的HTML；

而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

建议：

· 不使用超过一到两张样式表

· 不使用超过一到两个脚本（学会用合并脚本）

· 不使用行内样式（<style>.no-good {}</style>）

· 不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）

· 不使用行内脚本（<script>alert('no good')</script>）

· 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）

· 不使用表象 class 名（i.e. red, left, center）

html只关注内容

· HTML只显示展示内容信息

· 不要引入一些特定的 HTML 结构来解决一些视觉设计问题

· 不要将img元素当做专门用来做视觉设计的元素

· 样式上的问题应该使用css解决

前端开发规范— 命名、HTML、CSS、JS（上）

1、 命名规范

2、 注释规范

3、HTML规范

1、命名规范

2、注释规范