Web Front end Development specification

First, the front-end development specification purposes

In order to improve the efficiency of team collaboration , it is convenient for background staff to add functions and post-end optimization maintenance , output high-quality documents , developed this document . This specification document once confirmed ,  Front- End developers must do the foreground page development in accordance with this document specification .  If this document is incorrect or inappropriate, please submit it promptly. ,  can be changed after discussion decision .

II. Basic Guidelines

Conform to Web standards , semantic html tags;

Structure, performance, behavior are separated from each other , good compatibility;

Page Performance , Code Requirements Concise and clear order , as far as possible to reduce the server load , to ensure the fastest resolution speed.

Third, theHTML specification

1,DTD Unified with <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">;

2, unified UTF-8 code;

3, in general, the CSS file outside the chain to the head ,js file outside the chain to the body Bottom;

4,theHTML should be on the basis of ensuring flexibility to minimize the number of nested layers;

5, label semantics, to style after good readability;

6, in the page to avoid using the style attribute;

7, can be presented in the background of the picture , as far as possible to write css style;

8, the important picture must add the alt attribute, the important element and the truncated element add title;

9, in the process of writing the page , Please consider the backward extensibility;

Convenient service-side programmer set Template,html needs to add a note to the template, in the format: "<! -xxx start {--> content <!-- end -of-the-}xxx ";

Iv.CSS specification

1,css reset with YUI 's css reset;

2,CSS using base.css+common.css+app.css form;

3,app.css Use division of labor system, a front-end engineer is responsible for a column, if more people to maintain, need to add comments;

4, priority to the existing common.css in the combination of classes, reduce the number of custom classes;

5,CSS with a line of writing, to avoid the number of lines too long, unfavorable search;

6. Make full use of HTML 's own attribute and style inheritance principle to reduce the amount of code

7. Whenusing table tags, do not directly define the performance with the table attribute , should use the table as far as possible it is best to initialize the table style in the base.css file by first separating the structure and performance of the private property .

8, avoid the use of compatibility attributes , such as Text-shadow | | CSS3 related attributes;

9.reduce the use of properties that affect performance , such as Position:absolute | | float ;

Ten, the official release should be compressed, compressed after the name of the file should be added "_min" suffix;

V.JavaScript specification

1,JavaScript as far as possible to avoid the use of global variables, through the namespace or anonymous function to encapsulate variables into the closure;

2, Library Introduction: In principle, only the introduction of jQuery Library;

3,JS use base.js+common.js+app.js form;

4, class naming : First Letter Capital , hump-type naming;

5, Function name : First Letter Lowercase hump-type name;

6, naming semantics , as far as possible to use English words or their abbreviations;

7.avoid using methods or attributes that have compatibility and resource consumption , such as eval () & InnerText;

8, the code structure is clear , Add appropriate comments . improve the function reuse rate;

9,pay attention to and HTML separation , reduce reflow, pay attention to performance;

Ten, the official release should be compressed, compressed after the name of the file should be added "_min" suffix;

VI. Picture specification

1, all the page element class pictures are placed in the img folder , the test picture is placed in the img/demoimg folder;

2 , the picture format is limited to gif | | png | | jpg;

3, name all lowercase English letters|| Digital|| _ the combination of which must not contain kanji|| Space|| special characters; try to use understandable words, easy for other members of the team to understand;, name split tail two parts, separated by an underscore, likeAd_left01.gif | | btn_submit.gif;

4, in the case of visual effects to choose the smallest picture format and picture quality , to reduce load time;

5 , try to avoid the use of translucent png images;

6, using CSS Sprite technology to centralize small background images or icons , reduce the page http requests , but note ,  Be sure to use the corresponding Sprite PSD Draw guides in Source map ,  and save to img directory.

VII. specification of annotations

1, public components and the maintainer of each column need to add a note to the head of the file:

/**

* Document Use description

* Author's name

* Contact Information

* Date of production

**/

2, the large module annotation method

//==========

Code Usage

//==========

3, small comments, separate line, do not add comments in the same line after the code

Code Description

Web Front end Development specification