前端开发经验之开发规范
1. 从规范说起
刚开始接触前台的开发时,大多数人都只是以实现功能为主,代码无规范,这种情况下发现代码常见问题:
(1)实现比较繁琐,完全堆代码,代码整洁度很差;
(2)注释比较少,不容易理解,不容易维护;
(3)全局变量比较多,容易被其它全局命名空间里的代码所修改(如第三方库,window 引用),影响代码质量。
由此可见,规范是最基本,也是最重要的。下面例子介绍:有效运用CSS+HTML
冗余的HTML代码:
<div style=”width:20px; height:20px; color:blue;background:#ffffff; border:1px solid #ed5565;”></div>
推荐
优化的CSS+HTML代码:
<style>
.divStyle{
width: 20px;
height: 20px;
color: blue;
background: #ffffff;
border: 1px solid #ed5565;
}
</style>
<div class=”divStyle”></div>
2. HTML
基本语法规范
1.用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。
2.嵌套元素应当缩进一次(即两个空格)。
3.对于属性的定义,确保全部使用双引号,绝不要使用单引号。
4.不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。
尽量遵循 HTML 标准和语义,网站http://www.runoob.com/html/html-tutorial.html。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
· class
· id, name
· data-*
· src, for, type, href
· title, alt
· aria-*, role
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(防止页面id重复),因此排在第二位。如:
<a class="..." id="..." data-modal="toggle" href="#">link</a>
JavaScript 生成页面标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。
3. CSS
基本语法规范
1.用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。
2.为选择器分组时,将单独的选择器单独放在一行。
3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。
4.声明块的右花括号应当单独成行。
5.每条声明语句的 : 后应该插入一个空格。
6.为了获得更准确的错误报告,每条声明都应该独占一行。
7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。
9.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
10.十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。
11.尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
12.为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
13.避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
声明顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
1. Positioning定位
2. Box model盒模型
3. Typographic排版
4. Visual视觉效果
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
}
单行规则声明
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。
这样做的关键因素是为了错误检测 – 例如,CSS 校验器指出在 183 行有语法错误。如果是单行单条声明,你就不会忽略这个错误;如果是单行多条声明的话,你就要仔细分析避免漏掉错误了。
Less 和 Sass 中的嵌套
避免非必要的嵌套。这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。
// 没有嵌套
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// 有嵌套
.table > thead > tr {
> th { … }
> td { … }}
注释
代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。
对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。
/* Bad example */
/* Modal header */
.modal-header {
...}
/* Good example */
/* .modal-title 和 .modal-close的包装元素 */
.modal-header {
...}
class 命名
1.class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。
2.避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
3.class 名称应当尽可能短,并且意义明确。
基于最近的父 class 或基本(base) class 作为新 class 的前缀。
/* Bad example */
.t { ... }
.header { ... }
/* Good example */
.tweet { ... }
.tweet-header { ... }
4. JavaScript/JQuery
《HeadFirst Jquery》书中说过一句话,我觉得很贴切。
“CSS+HTML控制页面如何构建和显示(静态页面),而JQuery/JavaScript控制页面行为(动态页面)。”注:JQuery是一个专门用来动态改变页面的JavaScript库。
基本规范
具体规范可参考我的资源里面提供的《JavaScript 规范》