-
前端系统开发说明书
1.
一般规则
应用在
HTML,
JavaScript
和
CSS
上的通用规则。
1.1.
文件、资源命名
?
?
?
以可读性而言，中划线用来分隔文件名
确保文件命名总是以字母开头而不是数字
特殊含义的文件，
需要对文件增加前后缀或特定的扩展名
（
比如
., .
）
，
抑或一串前缀
（比
如
）
。使用点分隔符来区
分这些在文件名中带有清晰意义的元数据
。
1.2.
文本缩进
一次缩进
4
个空格。
1.3.
代码检查
对于前端
JavaScript
这种比较宽松自由的编程语言来
说，严格遵循编码规范和格式化风格指南极为重
要。前端开发人员需严格遵循开发规范，
并且使用自动代码检查工具（如
JSHint
）降低语法错误，
确保代
码正确执行。
JSHint
是一
款检查
JS
代码规范与否的工具，
用来
检查
JS
代码的规范性。
它提供了配置
的方法，
来检查不符合开发规范的错误。
1.4.
黄金定律
永远遵循同一套编码规范
--
可以是这里列出的，也可以是你自己总结的。
不
管有多少人共同参与同
一项目，一定要确保每一行代
码都像是同一个人编写的。
2.
HTML
规范
2.1.
文档类型
HTML5 docType
使用
HTML5
的文档类型申明：
html5
不基于
SGML,
因此不需
要对
DTD
进行引用，但是需要
doc
type
来规范浏览器的行为（让浏览器
按照他们应该的方式来
运行）而
HTML4.01
基于
SGM
L
，所以需要对
DTD
进行引用，才能
告知浏览器文档所
使用的文档类型。
2.2.
media
标签
禁止数字识自动别为电话号码
大部分
4.7~5
寸的安卓设备的
viewport
宽设为
360px
，
iPhone 6
上却是
375px
< br>，
大部分
5.5
寸安卓
机器（比如说三星
Note
）的
viewport
宽为
400
，
iPhone 6 plus
上是
414px
。
2.3.
语言属性（
Language
attribute
）
强烈建议为
html
根元素指定
lang
属性，从而为文档设置正确的语言。这将有助于语音合成工具确
定其所应该采
用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。更多关于
lang
属性的知识
可以从
此规范
中了解。
HTML
语言代码参考手册
上的文章可以获得更多有用的信息。
2.4.
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页
面内容的渲染方式。这样做的好处是，
可以避免在
HTML
中使用字符实体标记
（
character entity
）
，<
/p>
从而全部与文档编码一致
（一般采用
UTF-8
编
码）
。
2.5.
IE
兼容模式
IE
支持通过特定的
标签来确定绘制当前页面所应该采用的
IE
版本。
除非有强烈的特殊需求，
否则最
好是设置为
edge mode
，从而通知
IE
采用其所支持的最新的模式。
=“X
-UA-
Compatible” content=“IE=edge”>
2.6.
注释
2.7.
引入
CSS
和
JAVASCRIPT
根据
HTML5
规范，在引入
CSS
和
JavaScript
文件时一般不需要指定
type
属性，因为
text/css
和
text/javascript
分别是它们的默认值。
2.8.
语法
2.9.
属性顺序
【参考】
HTML
属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class
用于标识高度可复用组件，因此应该排在首位。
id
用于标识具体组件，应当谨慎使用（例如，页面
内的书签）
，因此排在第二位。
2.10.
语义化标签
根据元素
（有时称作
“
标签
”
）
其被创造出来时的初始意义来使用它
,
有根据有目的地使用
HTML
元素，
对于可访问性、代码
重用、代码效率来说意义重大。
2.11.
多媒体回溯
:
对页面上的媒体而言，像图片、视频、
canvas
动画等，要确保其有可替代的接入接口
2.12.
关注点分离
:
web
中的关注点包括信息（
HTML
结构
）
、外观（
CSS
）和行为（
JavaScript
）
。为了使它们成为可维
护
的干净整洁的代码，必须将它们分离开。严格地保证结构、表现、行为三者分离，并使
三者之间没有太多
的交互和联系。
就是说，
尽量在文档和模板中只包含结构性的
HTML
；
而将所有表现代码，
移入样式表中；
将所有动作行为，移入脚本中
;
在此之外，为使得
它们之间的联系尽可能的小，在文档和模板中也尽量少地
引入样式和脚本文件。
?
合并样式，不引用过多样式表
?
合并脚本，不使用过多脚本
?
不使用行内样式
?
不在元素上使用
style
属性
?
不使用行内脚本
?
不使用表象元素
?
不使用表象
class
名（
red, left,
center
）
2.13.
type
属性
省略样式表与脚本上的
type
属性。鉴于
HTML5
中以上两者默认的
type
值就是
text/css
和
text/ja
vascript
，所以
type
属性一般是可以忽略掉的。在老旧版本的浏览器中这么做也是安全可靠的。
2.14.
ID
和锚点
在利用锚点提高用户体验方面，一个比较好的做法是将页面内所有的头部标题元素都加上
ID
。页面
URL
的
hash
中带上对应的
ID
名称，即形成描点，方便跳转至对应元素所处位置。
例如，在浏览器中输入
URL
（带有锚点）时，浏览器将定位至锚点对应元素位置。
2.15.
HTML
引号
使用双引号
(“”)
而不是单引号
(
‘’)
。
2.16.
实用为王
尽量遵循
HTML
标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并
保持最小的复杂度。
3.
CSS
规范说明
3.1.
文件规范
1.
所有文件均归档至约定的目录中：
2.
框架引入方式
?
外链引入方式
?
整包导入项目方式
3.
文件引入可通过外联或内联方式引入
3.2.
CSS
注释规范
1.
【推荐】文件顶部注释
/*
*
@description:
中文说明
* @author
：
name
* @update 2019-01-01 14:00
*/
2.
模块注释：模块注释必须单独写在一行
/*
module: module2 by
张三
*/
Codes
/*
module: module2 by
张三
*/
-
-
-
-
-
-
-
-
-
上一篇：PCB命名规则详解
下一篇：[ABAQUS]减缩积分