Web front-end Development specification documentation

Specification Purpose
　　 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. Once this specification document is confirmed, front-end developers must proceed to the front page development according to this document specification. If this document is incorrect or inappropriate, please submit it promptly. After discussion the decision can be changed.
Basic Guidelines
　　 conform to Web standards, semantic HTML, structural behavior separation, and good compatibility. Page performance, code requirements concise and clear order, as far as possible to reduce 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 is placed 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 when adding functionality;
3. css file name: English name, suffix. css. Common base.css, Home index.css, other pages according to the actual module requirements named.
4. js file name: English name, suffix. js. Common Common.js, others are named according to the actual module requirements.
HTML Writing Specification
　 1. Document type declaration and coding: Unified for HTML5 claim type <! DOCTYPE html>; Encoding unified for <meta charset= "GBK"/>, writing with the IDE to achieve a hierarchical indentation;
2. In non-special cases, the style file must be linked to
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 + plugin name, such as JQuery.cookie.js;　
5. All encodings 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 issues of the HTML itself tags, such as span, EM, strong, optgroup, label, etc., when you need to add custom attributes for HTML elements, first consider whether there is a default existing appropriate label to set, if not, You can use the prefix "data-" 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> username </ 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: <input type= "text" id= "name" name= "name"/></p> to be written: <p><label for= "Name" > Name: < /label><input type= "text" id= "name"/></p>

　　 12. Images that can be presented in a background format, as much as possible in CSS style;
13. Important images must be added with ALT attribute, plus title for 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 program, in advance to write the general framework files, assigned to the front-end personnel to achieve internal structure & performance & behavior; shared css file base.css by I, in collaborative development, Every 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 Usage: ID is unique and parent, class is repeatable and child, so ID is used only on large modules, class can be used in high repetition rate and children; ID is in principle named when I distribute the framework file. Except for the hooks 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 naming: 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 , fontred, 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,

To add a new div element to the page code <div id= "Mainnav" in 2 that has already been built, press the A-name rule: <div id= "Mainnav" ><div class= " Firstnav ">...</DIV></DIV> style: #mainnav. firstnav{...} Press B to name the law: <div id= "Mainnav" ><div class= "Main_firstnav" >...</DIV></DIV> style:. main_firstnav{ .......}

　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.

Attribute enumeration: Layout positioning properties mainly include: Display & List-style & position (corresponding Top,right,bottom,left) &float & Clear & Visibility & ove Rflow; Main properties include: Width & height & margin & padding & border & background; Text properties include: Color & Font & ; Text-decoration & text-align & vertical-align & white-space & other & content; The attributes I have listed are the most commonly used and do not represent all of them;

　　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> here is the title list <span>2010-09-15</span></ul> define Ul.list li{position: relative} ul.list li Span{position:absolute; right:0} to achieve the right display of the date

　　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

Thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing and CellPadding css control method: table{border:0;margin:0; Border-collapse:collapse;} Table th, table td{padding:0;}, I initialize the table style in the Base.css file)

　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;

The jquery variable requires the first character to be ' _ ', the other is the same as the native JavaScript rule, such as: _itaolun, and requires that the variables be declared in the set, avoiding global variables.

　　 4. Class naming: First letter capital, hump type naming. 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 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 | | number | | _ combination, which must not contain Chinese characters | | space | | special characters; make it easy for other members of the team to understand, and make it easier for the rest of the group to be understood; another, name split tail two parts, with an underscore, 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 redundant code, write code that everyone can read. Simplicity is a virtue. For the sake of the user, for the sake of the server.

Hello, dumb thief, this article has collected others, have time to see you click here

Web front-end Development specification documentation