前端代码编写规范 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

前端代码编写规

命名规则

1.项目名称

项目名称驼峰式命名。

例：myProject

2.目录命名

采用单数命名法。

例：css img font js

3.JS文件命名

字母全部小写，单词之间用“-”。

例：popup-window.js

4.CSS文件命名

字母全部小写，单词之间用“-”。

例：popup-window.css

5.HTML文件命名

文件名称驼峰式命名。

例：riverMonitor.html

HTML

1.语法

缩进使用Tab（4个空格）;

解释：对于非HTML标签之间的缩进,比如script或style标签容缩进，与script或style标签的缩进同级。

first

second

嵌套的节点应该缩进;

在属性上使用双引号（字符串拼接除外）;

属性名全小写，用“-”做分隔符;

自动闭合标签处不能使用斜线。

Page title

Company

Hello, world!

2.HTML5 doctype

页面开头的doctype大写，html小写。

例：

...

3.字符编码

采用UTF-8的编码格式。

例：

...

4.引入CSS,JS

CSS引入使用

JS 引入使用页面不允许出现style标签。

5.属性

1.属性名必须使用小写字母

...

2.属性值必须使用双引号包围

不允许使用单引号。

6.属性顺序

class

id

name

data-*

src,for,type,href,value,max-length,max,min,pattern placeholder,title,alt

aria-*,role

required,readonly,disabled

7.标签

标签名必须使用小写字母

Hello StyleGuide!

1．对于无需自闭合的标签，不允许自闭合

解释：

常见无需自闭合标签有 input、br、img、hr 等。

2. 标签使用必须符合标签嵌套规则

解释：

比如div不得置于p中，tbody必须置于table中。

ul 标签包含着 li、dl 标签包含着 dt 和 dd。

3. 标签使用必须符合标签嵌套规则

常见标签语义：

P –段落

h1,h2,h3,h4,h5,h6–层级标题

strong,em–强调

ins–插入

del–删除

abbr–缩写

code–代码标识

cite–引述来源作品的标题

q–引用

blockquote–一段长篇引用

ul–无序列表

ol–有序列表

dl,dt,dd–定义列表

8.图片

禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

解释：

src 取值为空，会导致部分浏览器重新加载一次当前页面，参考：

https://developer../performance/rules.html#emptysrc

[建议] 避免为 img 添加不必要的 title 属性。

解释：

多余的 title 影响看图体验，并且增加了页面尺寸。

[建议] 为重要图片添加 alt 属性。

解释：

可以提高图片加载失败时的用户体验。

[建议] 添加 width 和 height 属性，以避免页面抖动。

[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

解释：

1.产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实

现，能方便用户下载。

2.无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 CSS 背景

图实现。

9.表单

1．控件标题

[强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

解释：

有两种方式：