Web front-end Development specification documentation

Basic guidelines

Conform to Web standards, semantic HTML, structural performance behavior separation, 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.

File specification

1. html, CSS, JS, images files are archived to the < system development specification > agreed directory;

2. html file name: English name, suffix. htm. At the same time, the corresponding interface draft in the same directory, if the interface is named Chinese, please rename the same name as the HTML file, in order to facilitate the back-end to find the corresponding page to add functionality;

3. css file name: English name, suffix. css. Shared Base.css, Home index.css, other pages according to the actual module requirements named.;

4. js file name: English name, suffix. js. Shared Common.js, others are named according to the actual module requirements.

HTML Writing Specification

1. Document type declaration and coding: Unified for HTML5 declaration type; Unified coding, the use of the IDE when writing to achieve a clear hierarchical indentation;

2. In non-special cases, the style file must be chained to ... The JavaScript file must be linked to the bottom of the page in a non-special case;

3. When introducing a style file or JavaScript file, omit the default type declaration, as follows:

 
<link rel="stylesheet" href="..." /> 
<style>...</style> 
<script src="..."></script> 

4. The introduction of JS library file, the file name must contain the library name and version number and whether it is a compressed version, such as Jquery-1.4.1.min.js; Introduction plug-in, file name format for library names + plug-in name, such as JQuery.cookie.js;

5. All codes conform to the XHTML standard, label & attribute & attribute naming must consist of lowercase letters and underscore numbers, and all tags must be closed, including BR (<br/>), hr (

6. Make full use of the non-compatibility problem of HTML itself tags, such as span, EM, strong, optgroup, label, and so on; When you need to add a custom attribute to an HTML element, first consider whether there is a default existing appropriate tag to set, if not, you can use the "data-" prefix to add custom attributes, avoid using "data:" and other naming methods;

7. Semantic HTML, such as the title according to the importance of h* (only one H1 on the same page), the paragraph mark with P, the list with UL, the inline element is not nested block-level elements;

8. Minimize div nesting, such as <div class= "box" ><div class= "Welcome" > Welcome to XXX, your username is <div class= "name" > User name </div ></div></div> can be replaced with the following code: <div class= "box" ><p> Welcome to XXX, your username is <span> user name </span ></p></div>;

9. When writing the link address, you must avoid redirection, for example: href= "http://itaolun.com/", that is, you must add "/" after the URL address;

10. Try to avoid using the style attribute on the page, i.e. style= "...";

11. You must add a label for the containing descriptive form element (input, textarea), as

<p> Name:<inputType= "text"  id= " Name " name=" name "  /></P>&NBSP; 
 to be written:   
 <p><label for= "name" > surname   Name:  </label><input type=" text " id=" name " /></P>&NBSP; 
  

12. Images that can be presented in a background format, as much as possible in CSS style;

13. Important images must be accompanied by ALT attribute; Add title to important elements and truncated elements;

14. Add comments to the block code and important functions (such as loops), so that the function is easily added in the background;

15. Use of special symbols: As far as possible using code substitution: such as < (<) & > (>) & Space () &» (») and so on;

16. In the process of writing the page, consider the backward extensibility;

Class & ID See CSS Writing specifications.

CSS Writing specifications

1. Code unification for Utf-8;

2. Collaborative development and division of labor: I will be based on each module, at the same time according to the page similar procedures, written in advance of the general framework documents, assigned to the front-end personnel to achieve internal structure & performance & behavior; Common CSS file base.css by I writing, collaborative development process, each page must be introduced, this file contains reset and the bottom of the head style, this file can not be arbitrarily modified;

3. Class and ID use: ID is unique and is the parent, class can be duplicated and is a child, so the ID is only used on large modules, class can be used in high repetition rate and sub-level; The ID is, in principle, named when I distribute the framework file, except for the hooks that are reserved for JavaScript;

4. For JavaScript to reserve the name of the hook, please start with js_, such as: Js_hide, js_show;

5. Class and ID Name: Large frame naming such as Header/footer/wrapper/left/right and so on in 2 by the I unified name. Other style names are named by lowercase English & numeric & _, such as I_comment, Fon Tred, width200; Avoid the use of Chinese pinyin, try to use a simple combination of words; In short, the naming should be semantic and concise.

6. Avoid class and ID name (this article is important, if you do not understand, please communicate with me in time):

A, through the subordinate writing evasion, example see D;

B, take the parent element Id/class named part of the name, example see D;

C, the high repetition rate of the name, please use their own code to underline the beginning, such as I_clear;

D, A, b two, for pages that have been framed in 2, for example,

The page code to be built in 2 for the frame<divId="Mainnav">Add a new div element to the </div>
Press A to name the law:<divId= "Mainnav" >< Div class= "Firstnav" > </div></DIV>,&NBSP; 
 Style notation:   # Mainnav  .firstnav{...}   
 by the B-naming law:  <div id= "Mainnav" ><div class= "Main_firstnav" > ... </div></DIV>,&NBSP; 
 Style:   . Main_firstnav{...} &NBSP 
                

7. CSS property Writing order, recommended to follow: Layout positioning properties--Self-properties--Text properties--other properties. This article can be written according to its own habits, but as far as possible to ensure that similar attributes are written together.

 
属性列举:  
布局定位属性主要包括: display & list-style & position（相应 的 top,right,bottom,left） ＆  
float & clear ＆ visibility ＆ overflow；  
自身属性主要包括: width & height & margin & padding & border & background;  
文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space &  
其他 & content;  
我所列出的这些属性只是最常用到的, 并不代表全部; 

8. Before writing the code, consider and improve the style reuse rate;

9. Take advantage of HTML's own attributes and style inheritance principles to reduce the amount of code, such as:

 
<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul> 
定义 
ul.list li{position:relative}  ul.list li span{position:absolute; right:0} 
即可实现日期居右显示 

10. The Chinese font name in the style sheet, be sure to transcode to Unicode code, to avoid coding errors when garbled;

11. Background picture Please use the Sprite technology as much as possible, reduce the HTTP request, considering the multi-person collaborative development, the sprite is made by module;

12. When using table tags (avoid using table tags as much as possible), do not use table attributes such as width/height/cellspacing/cellpadding to define the performance directly, and should use the table's own private properties to separate the structure and performance as much as possible. Such as

TheadTrThTdtbody,tfoot,colgroup,SCOPE;  
   (cellspaing and css control method:    
 table{border:0; Margin:0; Border-collapse:collapse;}  table th,  Table td{padding:0;}  ,   
 base.CSS file I initialize table styles)   
  

13. Eliminate the use of <meta http-equiv= "x-ua-compatible" content= "ie=7"/> compatible IE8;

14. When using PNG images to make pictures, request the picture format as png-8 format, if png-8 really affect the picture quality or translucent effect, please define the background for IE6 separately:

 
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader  
(sizingMethod=crop, src=’img/bg.png’); 

15. Avoid the use of compatibility attributes, such as Text-shadow | | The related attributes of CSS3;

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

17. You must add a comment for the large block style, and a small amount of cell block comment;

18. Code indentation and format: suggested single-line writing, according to their own habits, post-optimization I will be unified processing;

JavaScript writing specification

1. File encoding Unified for Utf-8, the writing process, each line of code to end must have a semicolon; In principle, all functions are developed in accordance with the requirements of the XXX project to avoid the code pollution caused by the down code of the Internet (Shen Redundant code | | Conflicts with existing code | |);

2. Library Introduction: In principle only the introduction of the jquery library, if the need to introduce a third-party library, the team should discuss the decision with other personnel;

3. Name of the variable: camel-named. Native JavaScript variable requirements are plain English letters, the first letter should be lowercase, such as itaolun;

 
jQuery变量要求首字符为‘_‘, 其他与原生JavaScript 规则相同, 如: _iTaoLun; 
另, 要求变量集中声明, 避免全局变量. 

4. Class naming: First uppercase, hump-named. such as Itaolun;

5. Function naming: First-letter lowercase camel-named. such as Itaolun ();

6. Naming semantics, using English words or their abbreviations as much as possible;

7. Avoid using methods or properties that have compatibility and resource consumption, such as Eval () & InnerText;

8. In the post-optimization, the JavaScript non-comment class Chinese characters must be converted to Unicode encoding to use, to avoid coding errors when garbled display;

9. The code structure is clear, add appropriate comments. Improve the function reuse rate;

10. Focus on separation from HTML, reduce reflow, pay attention to performance.

Picture specification

1. All page element class images are placed in the IMG folder, the test is placed in the Img/demoimg folder;

2. Image format is limited to GIF | | PNG | | jpg

3. Name all lowercase English letters | | Numbers | | A combination of _, which must not contain kanji | | Space | | special characters; Use easy-to-understand vocabulary to make it easier for other members of the team to understand; Another, named two parts, separated by underscores, such as Ad_left01.gif | | Btn_submit.gif;

4. Select the smallest picture format and image quality in case of visual effects to reduce loading time;

5. Avoid using translucent PNG images (if used, refer to the CSS specification for instructions);

6. Use CSS Sprite technology to centralize small background images or icons to reduce page HTTP requests, but note that you must draw a reference line in the corresponding sprite PSD source map and save it to the IMG directory.

Annotation specification

1. HTML Comment: Note Format <!--here is the comment-->, '--' can only be in the beginning and ending position of the comment, cannot be placed in the annotation text area;

2. CSS Comments: note Format/* Here is the comment */;

3. JavaScript comments, single-line comments using '//Here is a single-line comment ', multiline comments using/* There are multiple lines of comments */;

Development and testing tools conventions

Recommended use of Aptana | | Dw | | Vim can also be chosen according to your preference, subject to the following principles:

1. Do not use the IDE's view mode ' draw ' code;

2. Do not use the IDE to generate related function code, such as the DW built-in features JS;

3. The encoding must be formatted, such as indentation;

Test tool: Pre-development Test Firefox & IE6 & IE7 & IE8, add Opera & Chrome & Safari during post-optimization;

Recommended test order: Firefox-->ie7-->ie8-->ie6-->opera-->chrome-->safari, recommended to install Firebug and IE Tab plus plugin.

Other specifications

1. The development process strictly according to the Division of labor to complete the page, in order to improve the CSS reuse rate, avoid duplication of development;

2. Reduce the sink redundancy code, write the code that everyone can read. Simplicity is a virtue. For the sake of the user, for the server.

Web front-end Development specification documentation