前者代码书写规范

编辑器配置

将你的编辑器根据上面的配置实行设置,以幸免大规模的代码不平等和距离:

  • 用五个空格代替制表符(soft-tab 即用空格代表 tab 符)。
  • 保留文件时,删除尾部的空白符。
  • 设置文件编码为 UTF-8。
  • 在文书结尾添加三个空白行。

参照文书档案并将这么些计划音讯添加到项指标 .editorconfig 文件中。例如:Bootstrap
中的 .editorconfig
实例
。越多音讯请参考 about
EditorConfig

Less 和 Sass 中的嵌套

幸免非须要的嵌套。这是因为即使您能够行使嵌套,可是并不表示相应运用嵌套。唯有在必须将样式限制在父成分内(也等于后人选拔器),并且存在三个须要嵌套的因素时才使用嵌套。

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

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

选择器

  • 对于通用成分选拔 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 { … }

言语属性

根据 HTML5 规范:

强烈提出为 html 根元素钦定 lang
属性,从而为文书档案设置科学的语言。这将力促语音合成工具显著其所应有利用的发音,有助于翻译工具鲜明其翻译时所应服从的条条框框等等。

更加多关于 lang 属性的知识能够从 此规范 中了解。

此间列出了言语代码表

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

引入 CSS 和 JavaScript 文件

依照 HTML5 规范,在引入 CSS 和 JavaScript
文件时相似不供给钦命 type 属性,因为text/css 和 text/javascript 分别是它们的暗中同意值。

HTML5 spec links

CSS

压缩标签的数额

编辑 HTML
代码时,尽量防止多余的父成分。很多时候,那须要迭代和重构来兑现。请看上边包车型大巴案例:

<!-- Not so great -->

  <img src="...">


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

布尔(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>

语法

  • 用多少个空格来代替制表符(tab) —
    那是绝无仅有能确定保证在富有条件下获得同等呈现的章程。
  • 为选用器分组时,将独立的接纳器单独放在一行。
  • 为了代码的易读性,在每一个证明块的左花括号前添加3个空格。
  • 声称块的右花括号应当单独成行。
  • 每条注明语句的 : 后应当插入贰个空格。
  • 为了拿走更可相信的错误报告,每条注明都应有占据一行。
  • 负有宣称语句都应有以分行结尾。最终一条注明语句前边的分店是可选的,可是,倘若简单这么些分号,你的代码恐怕更易出错。
  • 对此以逗号分隔的属性值,各类逗号后边都应该插入三个空格(例如,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;
}

代码协会

  • 以组件为单位团体代码段。
  • 创设一致的注释规范。
  • 选择同一的空域符将代码分隔成块,那样方便扫描较大的文书档案。
  • 要是选拔了四个 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 { ... }

单行规则注脚

对于只含有一条注脚的体裁,为了易读性和方便人民群众连忙编辑,建议将语句放在同一行。对于富含多条注明的体制,照旧应当将宣示分为多行。

这么做的关键因素是为着错误检测 — 例如,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; }

注释

代码是由人编写并保险的。请确认保障您的代码能够自描述、注释优良并且易于旁人掌握。好的代码注释能够传达上下文关系和代码指标。不要简单地重复组件或
class 名称。

对于较长的注释,务必书写完整的语句;对于一般注脚,能够书写简洁的短语。

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

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

带前缀的天性

当使用一定厂商的带有前缀的性质时,通过缩进的主意,让各类属性的值在笔直方向对齐,那样方便多行编辑。

在 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);
}

语法

  • 用五个空格来代替制表符(tab) —
    那是绝无仅有能确定保证在颇具条件下得到同等呈现的方法。
  • 嵌套成分应当缩进一遍(即五个空格)。
  • 对于属性的定义,确认保障整个行使双引号,绝不要运用单引号。
  • 不要在自闭合(self-closing)成分的尾巴添加斜线 — HTML5
    规范
    中赫赫有名表明那是可选的。
  • 毫无简单可选的终结标签(closing
    tag)(例如,</li> 或 </body>)。



    Page title


    Company

    Hello, world!


传播媒介询问(Media query)的职位

将媒体询问放在尽大概相关规则的附近。不要将他们包裹放在1个单纯样式文件中还是放在文书档案尾部。假设你把他们分手了,现在只会被大家遗忘。上边给出多少个拔尖的实例。

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

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

HTML

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 { ... }

声称顺序

连带的个性注明应秦哪为一组,并遵守上边的顺序排列:

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

JavaScript 生成的标签

透过 JavaScript
生成的竹签让内容变得科学查找、编辑,并且下跌质量。能防止时尽量幸免。

绝不使用 @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>

实用为王

尽心尽力坚守 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>

HTML5 doctype

为各种 HTML 页面包车型大巴首先行添加专业方式(standard
mode)的扬言,那样能够保险在各类浏览器中保有同样的变现。

<!DOCTYPE html>
<html>
  <head>
  </head>
</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="...">

简写情势的品质证明

在急需出示地安装全数值的情景下,应当尽量限制使用简写格局的习性注明。常见的滥用简写属性注解的动静如下:

  • 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;
}

相关文章