Web Front-end development standard documents and web development standard documents

Web Front-end development standard documents and web development standard documents

 

For details, click

 

Specifications

This is the code writing specification followed and agreed by the front-end development team and is intended to improve the Code standardization and maintainability.

Basic Principles

Compliant with web standards, semantic html, separated structure and behavior, and excellent compatibility. In terms of page performance, code requirements are concise, clear, and orderly, minimizing server load and ensuring the fastest resolution speed.

General specifications

1. Ignore (Omit) Protocol: such as background: url (http://www.google.com/images/example); should write background: url (// www.google.com/images/example); To facilitate http and https protocol switching, unless a protocol is required

2. Enable hierarchical indentation with IDE During writing. The tab key is replaced by four spaces.

Because the editing tools in different systems do not parse tabs differently, the tab keys in windows occupy four spaces, in linux, it will become the location of eight spaces (unless you have set the length of the tab key ).

3. Use lower-case tag attributes

4. Do not leave spaces at the end to prevent diff.

5. Use the UTF-8 (no BOM) and add <meta charset = "UTF-8">

6. The file name should be in lowercase ". js" and "-" rather than "_" is recommended "_"

7. TODO (contact) and TODO: action item. Do not use @@

HTML refinement Specification

1. Use html5 specifications <! DOCTYPE html>

2. default label format: avoid the src = "" Problem

3. <a> default tag format: <a href = "###" title = "Link name"> xxx </> Note: target = "_ blank" depends on your needs.

4. <a> use the label reserved link placeholder ###. For more information, see a label placeholder.

5. Avoid redirection when writing the link address, for example, href = "http://itaolun.com/". Add"/"to the URL address.

6. All tags must be closed in compliance with XHTML standards

7. All labels are written in the same way as the end slash: <br/>

8. Avoid using outdated labels, such as <B> <u> <I> instead of <strong> <em>.

9. Use data-xxx to add custom data, for example, <input data-xxx = "yyy"/>

10. Avoid using inline style sheets with style = "xxx: xxx ;"

For special symbols, refer to HTML symbol entity

11. A label must be added to an input (textarea) element, for example, <p> Name: <input type = "text" id = "name" name = "name"/> </p> must be written as: <p> <label for = "name"> name: </label> <input type = "text" id = "name"/> </p>

CSS refinement Specification

1. Add ";" after each style attribute ";"

Convenient compression tool "sentence breaking ".

2. Class Name, separated by letters in the class using "-" [minus sign:

Separating with "-" is clearer than using a camper.
Product Line-product-module-sub-module, this method can also be used when naming

ID: small camper naming method, for example:

FirstName topBoxList footerCopyright

3. for space usage, the following rules are executed:

. Hotel-content {

Font-weight: bold;

}

There must be spaces between the selector and {
Attribute name: there must be spaces
Attribute name: prefix (Forbidden) with Space

One reason is the appearance, followed by a bug in IE 6.

4. (recommended) writing order of attributes. For example:

/* Locate */

Display: block;

Position: absolute;

Left: 0;

Top: 0;

/* Box Model */

Width: 50px;

Height: 50px;

Margin: 10px;

Border: 1px solid black;

/* Others */

Color: # efefef;

Positioning. Common examples include: display position left top float.
Box Model Related, common include: width height margin padding border, etc.
Other attributes
Writing in this order can be seen to improve the performance of rendering dom by the browser.

For example, if width and height are not set for an image in a webpage, the space occupied by the image is 0 before it is loaded, but after it is loaded, the zero space is suddenly opened, which will lead to re-arrangement and rendering of the elements below, resulting in repainting and reflow ). When we write css, we place the element in front. First, let the browser know whether the element is inside or outside the text stream, and where it is on the page, then let the browser know their width and height, and border and other space-consuming attributes. Other attributes are rendered in this fixed area. That's almost what it means ~

Recommended article: Poll Results: How do you order your CSS properties?

Http://www.mozilla.org/css/base/content.css

5. (recommended) when writing a style for a specific html structure, use the element name + class name

/* All nav files are compiled for ul */

Ul. nav {

......

}

". A div" and ". a div. B", why is the latter better? If the demand changes, add a div under ". a" and try to see if the initial style will affect the subsequent div ~

6. (not recommended) Use filter for ie and expression for (Forbidden)

This is mainly about efficiency. Pay special attention to using less CPU resources ~

7. CSS comments are represented by "/**/". During single-line comments, a space is reserved for each comment object and prefix/suffix, and each comment occupies a single line. During multi-line comments, each start or end annotator occupies one line. For example:

// Annotate CSS
Table {

Border-collapse: collapse;

}

 

JS refinement Specification

1. line feed

Each line of code should be less than 120 characters. If the number is more than this, you can consider line breaks. "or" + "operators should be placed at the end of the line, and the code after the line break must be indented multiple times before the line break.
If the parameters in a function or method are long, you need to divide them appropriately.
Do not wrap a line between the return keyword and the expression to be returned. For example:

Function test (){

Return 1;

}

2. code line

It is prohibited to write multiple phrase sentences in one row, that is, only one statement can be written in one row.
If, for, do, while, switch, case, default, break, continue, and other statements occupy one row.
If, for, do, while, and so on all the loop body and the execution statement part of the judgment body need to be included in "{}", do not omit curly braces. For example:
If (I <5) I + = 1;

// Correct

If (I <5 ){

I + = 1

}

3. Alignment

The boundary {} and "{" of the code block follow the previous line and are separated by spaces at the front. "}" should exclusively occupy one row and be located in the same column, and be left aligned with the statements that reference them.
At the beginning of the function body, the definition of the class, and the programs in the if, for, do, while, switch, and case statements, we must adopt the above indent method.
4. Space

The keyword must be followed by a space to highlight the keyword.
Space cannot be reserved between the function name, method name, and left brace "(", for example:
// Incorrect

Function getInfo (){

// Code

}

// Correct

Function getInfo (){

// Code

}

When declaring a function expression, no space is allowed between the function and the left brace "(". For example:
// Incorrect

Var user = function (){

// Code

}

// Correct

Var user = function (){

// Code

}

 

A comma is followed by a space.
Value assignment operator, comparison operator, arithmetic operator, logical operator, bitfield operator, such as "=", "+ =" "> =", "<=", "+", "*", "%", "&", and "|" spaces should be added before and after binary operators.
"! ","~ "," ++ "," -- "," & "(Address operator), and other single-object operators do not contain spaces.
".", "[]" Without spaces.
5. Empty rows

Empty rows must be added after each class declaration and after each function definition.
In a function, there are no empty rows between closely related statements on the zookeeper, and empty rows should be separated elsewhere.
6. Use a strict condition operator. Use = instead of =, use! = Replace! =

7. Avoid extra commas. For example, var arr = [1, 2, 3,]

8. The statement must end with a semicolon, except for, function, if, switch, try, while.

9. left curly braces are placed at the end of the row, and right curly braces are placed at the beginning of the row.

10. The following types of objects are not recommended to be constructed using new: new Number, new String, new Boolean, new Object (replaced by {}), and new Array (replaced ).

11. "," between array members must be followed by a space.

12. Do not use javascript to retain the keyword name in javascript/json, which may cause errors in IE. Keywords (break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, ), keywords (abstract, boolean, byte, char, class, const, debugger, double, enum, export, extends, fimal, float, goto, implements, import, int, interface, long, mative, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile ).

13. We recommend that you use "+" as the line feed connector instead of "\".

14. the prompt information cannot be described in a general language. It should be concise and clear. The error can be located immediately when the information is displayed. If the prompt "this user does not exist" is displayed ", instead of "incorrect data returned in the background" or "Network timeout ".

• Source: http://www.cnblogs.com/smilepiu/archive/2014/07/08/3831620.html

 

For more web content, click