代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。 说明:正确的 英文拼写和语法可以让阅读者易于理解,避免歧义。注意,即使纯拼音命名方式也要避免采用
正例:henan/luoyang/rmb 等国际通用的名称,可视同英文
反例: DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
杜绝完全不规范的缩写,避免望文不知义:
反例: AbstractClass
“缩写”命名成 AbsClass
;condition
“缩写”命名成 condi
,此类随意缩写严重 降低了代码的可阅读性。
(二) HTML 规范 (Vue Template 同样适用)
1.2.1 HTML 类型
推荐使用 HTML5 的文档类型申明:
(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。
规定字符编码
IE 兼容模式
规定字符编码
doctype 大写
正例:
![Company](images/company-logo.png)
1.2.2 缩进
缩进使用 2 个空格(一个 tab);
嵌套的节点应该缩进。
1.2.3 分块注释
在每一个块状元素,列表元素和表格元素后,加上一对 HTML 注释。
1.2.4 语义化标签
HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标 签。
正例
<header></header> <footer></footer>
反例
<div> <p></p> </div>
1.2.5 引号
使用双引号(" ") 而不是单引号(’ ') 。
正例: <div class=”box”></div>
反例:<div class=’box’></div>
(三) CSS 规范
1.3.1 命名
类名使用小写字母,以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和 晦涩难懂的名称。
不推荐:
.fw-800 { font-weight: 800; } .red { color: red; }
推荐:
.heavy { font-weight: 800; } .important { color: red; }
1.3.2 选择器
1) css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看,应该尽量避免 css 中出现 HTML 标签,并且在 css 选择 器中出现标签名会存在潜在的问题。
2) 使用直接子选择器
很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的
区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,
这是一个非常不好的做法。如果你不写很通用的,需要匹配到 DOM 末端的选择器, 你应该总 是考虑直接子选择器。
不推荐:
.content .title { font-size: 2rem; }
推荐:
.content > .title { font-size: 2rem; }
1.3.3 尽量使用缩写属性
不推荐:
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
推荐:
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
1.3.4 每个选择器及属性独占一行
不推荐:
button { width: 100px; height: 50px; color: #fff; background: #00a0e9; }
推荐:
button { width: 100px; height: 50px; color: #fff; background: #00a0e9; }</