前端代码书写规范

HTML

语法

  • 故简单单空格来代替制表符(tab) —
    这是唯一会担保在富有条件下得同展现的方式。
  • 嵌套元素应当缩进一不善(即有限单空格)。
  • 于性之概念,确保全体行使对引号,绝不要利用单引号。
  • 不要在起闭合(self-closing)元素的尾部添加斜线 — HTML5
    规范面临显然说明这是可选的。
  • 决不简单可选取的毕标签(closing
    tag)(例如,</li> 或 </body>)。



    Page title


    Company

    Hello, world!


HTML5 doctype

啊每个 HTML 页面的率先履行上加专业模式(standard
mode)的宣示,这样能确保于每个浏览器被装有相同的展现。

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

语言属性

根据 HTML5 规范:

强烈建议为 html 根元素指定 lang
属性,从而也文档设置科学的言语。这将促进语音合成工具确定该所应有用的发音,有助于翻译工具确定那个翻译时所承诺遵循的条条框框等等。

再度多关于 lang 属性的学问可以从 此规范 中了解。

此地列有了言语代码表。

<html lang="zh-CN">
  <!-- ... -->
</html>

IE 兼容模式

IE 支持通过一定的 <meta> 标签来确定绘制当前页面所应下的 IE
版本。除非有鲜明的特需要,否则极是安装为 edge mode,从而通知 IE
采用该所支持的风行的模式。

看这首 stack overflow
上之章好获得更多行的音。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

通过明确声明字符编码,能够管浏览器快速并易之判断页面内容的渲染方式。这样做的功利是,可以免以
HTML 中使用字符实体标记(character
entity),从而全部暨文档编码一致(一般以 UTF-8 编码)。

<head>
  <meta charset="UTF-8">
</head>

引入 CSS 和 JavaScript 文件

因 HTML5 规范,在引入 CSS 和 JavaScript
文件时一般不待指定 type 属性,因为text/css 和 text/javascript 分别是她的默认值。

HTML5 spec links

  • Using
    link
  • Using
    style
  • Using
    script

实用为天王

尽量按照 HTML
标准以及语义,但是绝不坐牺牲实用性为代价。任何时刻还设尽可能使最少之竹签并保持最小之复杂度。

性能顺序

HTML 属性应当依以下为来底一一依次排列,确保代码的易读性。

  • class
  • idname
  • data-*
  • srcfortypehref
  • titlealt
  • aria-*role

class 用于标识高度可复用组件,因此相应排除在首各类。id
用于标识具体组件,应当谨慎采用(例如,页面内的书签),因此排除在其次个。

<a class="..." id="..." data-modal="toggle" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

布尔(boolean)型属性

布尔型属性可以于声明时无赋值。XHTML 规范要求呢那赋值,但是 HTML5
规范非待。

重新多信息要参考 WhatWG section on boolean
attributes:

素的布尔型属性如果出价,就是 true,如果无价值,就是 false。

如果一定若果呢该赋值的言语,请参考 WhatWG 规范:

如果属性是,其值必须是空字符串或 […]
属性的标准名称,并且毫不再收尾添加空白符。

简简单单来说,就是不要赋值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

减标签的数量

编排 HTML
代码时,尽量避免多余的父元素。很多时候,这亟需迭代和重构来促成。请看下面的案例:

<!-- Not so great -->

  <img src="...">


<!-- Better -->
<img class="avatar" src="...">

JavaScript 生成的价签

经 JavaScript
生成的签让内容变得没错查找、编辑,并且降低性能。能幸免时尽量避免。

CSS

语法

  • 从而半单空格来代替制表符(tab) —
    这是绝无仅有能够担保在有条件下取同等展现的法门。
  • 啊选择器分组时,将独立的选择器单独在一行。
  • 为了代码的易读性,在每个声明块的左花括号前方上加一个空格。
  • 宣示块的右手花括号当单独成行。
  • 各个条声明语句的 : 后应当插入一个空格。
  • 为获取重新确切之错误报告,每条声明还应该占据一行。
  • 抱有宣称语句都该为分公司结尾。最后一漫长声明语句后面的分公司是可选的,但是,如果简单这个分号,你的代码可能更易出错。
  • 对于因为逗号分隔的属于性值,每个逗号后面都应插入一个空格(例如,box-shadow)。
  • 不要在 rgb()rgba()hsl()hsla() 或 rect() 值的内部的逗号后面栽空格。这样好从多只属于性值(既加逗号也加空格)中分多个颜色值(只加逗号,不加以空格)。
  • 对属于性值或颜料参数,省略低于 1 的小数前面的 0
    (例如,.5 代替 0.5-.5px 代替-0.5px)。
  • 十六向前制值应该全套大写,例如,#fff。在围观文档时,小写字符易于分辨,因为他们的花样更易于区分。
  • 尽可能采用简写形式的十六上制值,例如,用 #fff 代替 #ffffff
  • 呢选择器中的性能上加双引号,例如,input[type="text"]。惟有以好几情况下是可选的,但是,为了代码的一致性,建议还丰富双引号。
  • 避免吗 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;

对此此运用的术语有疑点呢?请参考 Wikipedia 上之 syntax section of the
Cascading Style Sheets
article。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

宣称顺序

连带的属性声明应当由为同组,并仍下面的顺序排列:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

鉴于定位(positioning)可以自正规的文档流中移除元素,并且还能够盖盒模型(box
model)相关的体,因此解除在首员。盒模型排在其次位,因为它决定了组件的尺寸及位置。

其余属性只是影响组件的内部(inside)还是是不影响前少组属性,因此排除在末端。

整体的性质列表及其排列顺序请参考 Recess。

.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;

  /* Misc */
  opacity: 1;
}

并非以 @import

与 <link> 标签相比,@import 指令要舒缓很多,不光增加了附加的请次数,还会促成不可预料的题材。替代方式有以下几种:

  • 使多独 <link> 元素
  • 经过 Sass 或 Less 类似的 CSS 预处理器将多单 CSS 文件编译为一个文本
  • 由此 Rails、Jekyll 或任何系统受提供了 CSS 文件合并功能

请参考 Steve Souders
的文章打听再多文化。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

传媒询问(Media query)的岗位

以媒体询问在尽可能相关规则之邻座。不要用他们包裹放在一个纯粹样式文件中要么放在文档底部。如果你把他们分开了,将来就会叫大家遗忘。下面为闹一个榜首的实例。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

带前缝的习性

当使用一定厂商的盈盈前缀的性能时,通过缩进的措施,让每个属性之值在直方向对共同,这样好多执行编辑。

在 Textmate 中,使用 Text → Edit Each Line in Selection (⌃⌘A)。在
Sublime Text 2 中,使用 Selection → Add Previous Line (⌃⇧↑)
和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

单行规则声明

对于独含有一修声明的样式,为了易读性和利快速编辑,建议以喻句放在同一行。对于富含多长长的声明的体裁,还是应该将宣示分为多推行。

这么做的关键因素是为了错误检测 — 例如,CSS 校验器指出在 183
行有语法错误。如果是单行单条声明,你就无见面忽略这个错误;如果是单行多长长的声明的话,你将仔细分析避免漏掉错误了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

简写形式的性质声明

当得展示地设置所有值的图景下,应当尽量限制以简写形式的性声明。常见的滥用简写属性声明的情状如下:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

多数景下,我们不需要呢简写形式之性声明指定所有值。例如,HTML 的
heading
元素只待设置及、下边距(margin)的值,因此,在必要的时光,只待覆盖这半独价值就是足以。过度施用简写形式之性声明会招代码乱,并且会针对属于性值带来不必要之幂从而挑起不测的副作用。

MDN(Mozilla Developer Network)上亦然切片好好的关于shorthand
properties 的章,对于无太熟悉简写属性声明及其行为之用户很有因此。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Less 和 Sass 中的嵌套

免不必不可少之嵌套。这是因虽然你得应用嵌套,但是并无表示相应运用嵌套。只有以必将样式限制在父元素内(也便是后人选择器),并且设有多只待嵌套的要素时才使用嵌套。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

注释

代码是由于人口编写并保护的。请保管您的代码能够起描述、注释良好而爱他人理解。好的代码注释能够传达上下文关系与代码目的。不要简单地再组件或
class 名称。

对于比较丰富之诠释,务必书写完整的句子;对于普通注解,可以开简洁之短语。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

class 命名

  • class
    名称被仅能够冒出些微写字符和破折号(dashe)(不是产划线,也不是驼峰命名法)。破折号应当用于系
    class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。
  • 避免超负荷任意的简写。.btn 代表 button,但是 .s 不克发表任何意思。
  • class 名称应当尽量少,并且意义不言而喻。
  • 使用产生含义之名称。使用有团体的要目的显然的名目,不要以表现形式(presentational)的名号。
  • 根据最近之父 class 或骨干(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识作为(与体相对),并且永不以这些 class
    包含到 CSS 文件中。

当啊 Sass 和 Less 变量命名是为得以参照上面列有底各项专业。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

选择器

  • 对通用元素用 class ,这样便于渲染性能的优化。
  • 对此经常出现的机件,避免用性质选择器(例如,[class^="..."])。浏览器的特性会遭遇这些元素的震慑。
  • 选择器要尽可能少,并且尽量限制组成选择器的要素个数,建议不要跨越 3
  • 只有于必要的时才以 class
    限制在不久前的父元素内(也就是后人选择器)(例如,不采取带来前缀的 class
    时 — 前缀类似于命名空间)。

扩大阅读:

  • Scope CSS classes with
    prefixes
  • Stop the
    cascade

    / Bad example /
    span { … }
    .page-container #stream .stream-item .tweet .tweet-header .username { … }
    .avatar { … }

    / Good example /
    .avatar { … }
    .tweet-header .username { … }
    .tweet .avatar { … }

代码组织

  • 因组件为单位集体代码段。
  • 制订同的笺注规范。
  • 运用同样的空符将代码分隔成块,这样好扫描较充分的文档。
  • 只要采取了大多单 CSS
    文件,将那据组件而休页面的样式分拆,因为页面会给重组,而组件只会被挪动。

    /*

    • Component section heading
      */

    .element { … }

/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

编辑器配置

用公的编辑器按照下面的部署进行设置,以避免大规模的代码不等同和异样:

  • 于是简单独空格代替制表符(soft-tab 即用空格代表 tab 符)。
  • 封存文件时,删除尾部的空白符。
  • 设置文件编码为 UTF-8。
  • 当文件结尾添加一个缺损白行。

参照文档并以这些部署信息上加至品种之 .editorconfig 文件中。例如:Bootstrap
中的 .editorconfig
实例。更多信息要参考 about
EditorConfig。

相关文章