Front-end Development Specification document (first draft)

General principles

• Indent in

  For all programming languages, we require the indentation to be soft tab (with a space character). Hitting Tab in your text editor should be equal to 4 spaces.

• Readability vs Compression

  For maintaining existing files, we think readability is more important than saving file size. Plenty of whitespace and proper ASCII art are encouraged. No developer has to deliberately compress HTML or CSS, or minimize the JavaScript code.

  We will automatically minimize and gzip compress all static client files on the server side or build process, such as CSS and JS

• Html,css,js Code Separation

  Keep your HTML code as neat as possible, and use the simplest code level to complete complex layout requirements for later maintenance and expansion

  CSS code itself is global, all should adopt CSS modularization idea, constrain CSS rules, minimize to the overall pollution

  JS code is divided into functional code and business code, function code as far as possible to extract the success of components, to facilitate the use of other colleagues in the team

• Naming conventions

  Files and folders: all English lowercase letters + numbers or connectors "-, _", no other characters appear such as: Jquery.1.x.x.js
  File: Call/libs file must contain version number, compressed file must contain min keyword, other plug-ins do not include such as:/libs/modernizr-1.7.min.js
  ID: Small Camels peak-type naming method such as: FirstName topboxlist footercopyright
  Class: [minus connector] such as: Top-item Main-box box-list-item-1
  Try to name the words with a definite meaning, and avoid the individual word naming styles of the left bottom.

HTML specification Basic syntax

On attributes, use double quotation marks instead of single quotes.
Do not use slashes at the end of auto-closing tags-the HTML5 specification indicates that they are optional.
Do not omit the optional close label (for example, and).
Try to use the class to render the style, avoid using the ID to write the style

Doctype

在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。

1 <! DOCTYPE html>

Character encoding

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后，需要避免在 HTML 中出现字符实体，直接提供字符与文档一致的编码（通常是 UTF-8）。

1  2   <meta charset= "UTF-8" >3

Compatibility mode

优先使用最新版本的IE 和 Chrome 内核

1 <meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

Basic SEO

<meta name= "keywords" content= "your keywords" ><meta name= "description" content= "Your description" >

Viewport settings

• Viewport: Generally refers to the size of the content area of the browser window, does not include toolbars, tabs and other content;
• Width: Browser width, output device of the page visibility area;
• Device-width: Device resolution width, output device's screen visible width;
• Initial-scale: initial zoom ratio;
• Minimum-scale: Minimum zoom ratio;
• Maximum-scale: Maximum zoom ratio;
• User-scalable: When you can allow users to zoom in on a page
• Minimal-ui, do not support (remove navigation bar) for mobile device optimization, set the width of the visible area and the initial zoom ratio.

<meta name= "viewport" content= "Width=640,user-scalable=no" ><meta name= "viewport" content= "width= Device-width,initial-scale=1.0,user-scalable=no ">

Favicon

When Favicon is not specified, most browsers request Favicon.ico under the Web Server root directory. To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods:

• Place the Favicon.ico file in the Web Server root directory;
• Use link to specify Favicon;

<link rel= "shortcut icon" href= "Path/to/favicon.ico" >

Mobile Page Header recommended configuration

    <meta charset= "UTF-8" > <title>title</title> <meta name= "keywords" content= ""/> <m ETA name= "description" content= ""/> <meta name= "viewport" content= "Width=640,user-scalable=no"/> <!--& Lt;meta name= "viewport" content= "initial-scale=1.0, minimum-scale=1.0, Maximum-scale=1.0,user-scalable=no, Minimal-ui ">--> <meta http-equiv=" ClearType "content=" on "> <meta name=" Apple-mobile-web-app-title "Co Ntent= "..." > <meta name= "apple-mobile-web-app-capable" content= "yes" > <meta name= "format-detection" cont Ent= "Telephone=no" > <meta http-equiv= "X-rim-auto-match" content= "None" > <meta name= "apple-touch-fullscr Een "content=" yes "> <meta name=" Apple-mobile-web-app-status-bar-style "content=" Black "> <!--UC Force vertical screen--&G    T <meta name= "Screen-orientation" content= "Portrait" > <!--QQ Force vertical Screen--<meta name= "X5-orientation" Conte Nt= "Portrait" > <!--UC Mandatory fullscreen --<meta name= "Full-screen" content= "yes" > <!--QQ Force full Screen--<meta name= "X5-fullscreen" content = "true" >

CSS and JavaScript structure, style, behavior separation

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

<link rel= "stylesheet" href= "Code-guide.css" ><script src= "Code-guide.js" ></script><style >  /**/</style>

More practical than perfect

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:

<!--not great--><span class= "Avatar" >  </span><!--Better-->< IMG class= "Avatar" src= "..." >

Avoid generating labels with document.write

用 document.write生成标签让内容变得更难查找，更难编辑，<b>性能更差</b>。应该尽量避免这种情况的出现。

CSS specification

• The external file link loads the CSS, minimizing the number of files. The load tag must be placed in the HEAD section of the file.
• Avoid inline styles that are not introduced inline in a file, whether it is defined in a style label or directly on an element. This makes it difficult to track style rules
• Use Reset.css to make the rendering effect more consistent across browsers.
• Avoid using CSS expressions (expression)
• Don't use @import.
• Avoid using the ID selector
• Avoid using expensive CSS selectors such as: *
• Do not add HTML tags to class such as: Li.list
• Avoid making selectors look like regular expressions such as: [Name= ' AA '] advanced selectors are time-consuming and difficult to read and avoid.
• Avoid using HTML tags directly as a style selector
• Avoid using!important
• Use CSS3 pseudo-elements sparingly
• Avoid using CSS3 inefficient attributes, such as: linear-gradient,borde-image;
• Use a semantic, generic naming approach;
• Use hyphens-as Class name qualifiers, do not hump nomenclature and underline;
• Avoid too many nesting levels of selectors, as much as less than 3 levels;

Modular with CSS

css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染

Attribute shorthand

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:paddingmarginfontbackgroundborderborder-radius大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

One line or multiple lines of writing?

css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好。然而在和团队的工作中，尤其是大型的css文件，我是将样式写成多行，并使用css模块化思想:

 .alert-window  { background :  #fff ;  border :  1px solid #ff0 ;  Font-weight :  bold ;        padding :  10px ; }.alert-window. Window-title  {
  ... 
 }.alert-window. window-content  {
　　 ... 
 }.alert-window. Window-buttom  {
  ... 
 } 

PS:　　1. 现在纯手写css比较少了，一般 都是用sass 和 less 来管理样式。
       2 书写sass 和 less 一行简直就是灾难 3 css 多行书写，还有个好处，可以要求团队，css 输出按照盒子模型的顺序去书写，更好维护，不强制但是倡导输出是一致的。

JavaScript Naming conventions

• Use single quotes ' instead of double quotes '
• The name of the class uses the Camel naming convention, and the first letter is capitalized, for example: Account, EventHandler
• Constants must be capitalized, declared in the front of an object (class) or enumeration variable, and camel naming rules
• The private variables and properties of the class are suggested to begin with _. For example: Var _buffer; _init:function () {}

Variable

• Must consist of all lowercase characters
• The variable must be used after the declaration is initialized, even if it is a NULL type.
• Assigning variables at the top of the scope helps avoid variable declaration issues and issues related to Declaration elevation
• Variables do not create ambiguity.
• The associated set of variables should be placed in the same block of code, and the non-related set of variables should not be placed in the same block of code.
• Variables should be kept to a minimum for the life cycle.
• Can directly use the direct volume, do not use new ...; such as: a=/\d/g; A=new RegExp (' \d ', ' G ');

Do not use void do not use the WITH statement do not use the Continue statement as far as possible do not use bit operations

PS: The front-end team has few trained, bit operator efficiency will not have too high performance, the advantage is not obvious, starting is the high-strength algorithm needs, or do not have bit operations; it will cause the code bitter and difficult to understand, not conducive to subsequent maintenance

Do not expand the built-in prototypes (Object,array,string ... Do not use eval (); + Operations to be aware

    ' 1 ' +1==2//false;    1+1==2//true

Use simple condition to judge the way

if (Name!== 0 | | name!== "| | name!==NULL | | name!==undefined) {...} if (name) {...} if (Collection.length > 0) {  ...} if (collection.length) {...}

Use ternary expressions instead of simple if else

if (a) {        d= ' B '    }else{        D= ' C '    }    d=a? ' B ': ' C ';

Use of && | | Instead of a simple if

if (a) {        B ()    }    && C ();     if (BB) {        a=bb    }else{        a=2    }    a=bb| | 2

Using arrays or JSON to optimize if else

if (a== ' 1 ' | | a== ' B ' | | a== ' c ' | | a== ' SS ') {        bb ()    } Else {        ...    }     var hasdata={        ' 1 ': 1,        ' B ': 1,        ' C ': 1,        ' ss ': 1    }    if(Hasdata[a]) {        bb ()    }else{    ...    }

Do not declare a function in a non-function block (if, while etc)

尽管浏览器允许你分配函数给一个变量，但坏消息是，不同的浏览器用不同的方式解析它如果一定要定义函数，请用函数表达式方式声明；如：

function B () {    ...    }     if (a) {        function  B () {            ...        }    }     var b=function() {    ...    }     if (a) {        b=function() {            ...        }    }

Have else if all have {}

if (a)        B ()    else        C ();     if (a) {        B ();    } Else {        c ();    }

Do not have extra commas

这会在IE6、IE7和IE9的怪异模式中导致一些问题；同时，在ES3的一些实现中，多余的逗号会增加数组的长度。在ES5中已经澄清

var hero = {    ' Kevin ',    ' Flynn ',  };   var heroes = [    ' Batman ',    ' Superman ',  ];   var hero = {    ' Kevin ',    ' Flynn '  };   var heroes = [    ' Batman ',    ' Superman '  ];

Using the event Proxy

在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了

Picture try to use Png8 instead of GIF pictures do not use animated GIF pictures on mobile phones using sprite chart, reduce the loading of CSS background images using third-party tools to compress png24 pictures, can have very high compression rate

PS: The reason why the mobile phone does not use GIF chart is: 1. Can use CSS3 animation to replace, CSS3 animation only start Page composite, better performance, 2 GIF animation in the mobile phone display is not smooth, can not use GPU acceleration, will cause page rearrangement, severely affect page performance

Front-end Development Specification document (first draft)