| Article Introduction: In order to improve the efficiency of teamwork, it is convenient for the backstage staff to add the function and the late-stage optimization maintenance, the output high-quality documents. Once the specification document is confirmed, the front-end developer must follow this document specification for the foreground page development. Please submit this document if it is wrong or inappropriate. The decision can be changed after discussion. |
Normative Purpose
In order to improve the efficiency of teamwork, it is convenient for the backstage staff to add the function and the front-end optimization maintenance, the output high-quality documents, special design this document. Once the specification document is confirmed, the front-end developer must follow this document specification for the foreground page development. If there is any wrong or improper place in this document, please submit it in time, after discussion, you can change it.
Basic Guidelines
Conform to Web standards, semantic HTML, structural performance behavior separation, good compatibility. Page performance, code requirements concise and orderly, as much 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 catalogue;
2. html file naming: English name, suffix. htm. At the same time, the corresponding interface draft in the same directory, if the interface of the draft named Chinese, please rename the same name as the HTML file, to facilitate the back-end to add features to find the corresponding page;
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, other according to the actual module requirements named.
HTML Writing Specification
1. Document type declaration and coding: Unified for HTML5 declaration type ; The encoding is unified as 2. In special cases, the style files must be linked to ...; JavaScript files must be linked to the bottom of the page in exceptional cases;
3. When introducing a style or JavaScript file, omit the default type declaration as follows:
4. The introduction of JS library files, file names must include the library name and version number and whether it is a compressed version, such as Jquery-1.4.1.min.js; Introduction of Plug-ins, file name format for the library name + plug-in name, such as JQuery.cookie.js;
5. All codes conform to XHTML standards, Tags & properties & attribute names must consist of lowercase letters and underscore digits, and all tags must be closed, including BR (
), hr (), etc. Attribute values must be included in double quotes;
6. Make full use of HTML tags with no compatibility problems, such as span, EM, strong, optgroup, label, etc. When you need to add custom attributes to HTML elements, consider whether there is a default existing appropriate tag to set, and if not, you can use the prefix "data-" to add custom attributes to avoid using "data:" and other naming methods;
7. Semantic HTML, such as the title according to the importance of using h* (the same page can only have a H1), paragraph mark with P, list with UL, inline elements can not be nested block-level elements;
8. Minimize div nesting, such as
Welcome to XXX, your username is
Username
can be replaced by the following code:
Welcome to visit XXX, your username is user name
;
9. When writing a link address, you must avoid redirection, for example: href= "http://itaolun.com/", that is, add "/" after the URL address;
10. Try to avoid using the style attribute in the page, that is, style= "...";
11. A label must be added for a descriptive form element (input, textarea), such as
name:
to be written :
Name:
12. Can be presented as a background picture, as far as possible to write CSS style;
13. Important pictures must be added with ALT attribute; Add title to important elements and truncated elements;
14. To the block code and important functions (such as loops) with annotations, facilitate the background to add functionality;
15. The use of special symbols: As far as possible use of code substitution: for example < (<) & > (>) & Space () &» (») and so on;
16. In the process of writing pages, consider the backward extensibility;
Class & ID See CSS Writing specifications.
CSS Writing specification
1. Unified coding 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 similarity program, in advance to write a general framework document, assigned to the front-end staff to achieve internal structure & performance & behavior; Common CSS file base.css by I writing, collaborative development process, each page please be sure to introduce, this file contains reset and head bottom style, this document can not be arbitrarily modified;
3. Class and ID use: ID is unique and is the parent, class can be repeated and is a child, so the ID only used in large modules, class can be used in the high repetition rate and children; IDs are, in principle, named when I distribute the framework file, except for JavaScript reserved hooks;
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 framework naming such as Header/footer/wrapper/left/right in 2 by I unified naming. Other style names are grouped by the lowercase English & digit & _, such as I_comment, Fontred, width200; Avoid the use of Chinese pinyin, try to use a simple word combination; In short, the name should be semantically, concise.
6. Avoid class and ID name (this is important, if you do not understand, please communicate with me in a timely way):
(a) by means of the subordinate writing to avoid, example see D;
B to name the parent element id/class naming section, see D;
c Repeat the high rate of naming, please add their own code to underline the beginning, such as I_clear;
D a,b Two, for pages that have already been framed in 2, such as adding a new div element to the page code
According to a nomenclature:
Style: #mainnav. firstnav{...}
According to the B-naming law:
Style:. main_firstnav{...}
7. CSS property Writing order, recommended to follow: Layout positioning properties--> their own properties--> Text properties--> other properties. This article can be written according to its own habits, but try to ensure that the same attributes are written together. Attribute enumeration: Layout positioning properties mainly include: Display & List-style & position (corresponding Top,right,bottom,left) & float & clear & visibility & ov Erflow own properties mainly include: Width & height & margin & padding & border & background; Text properties mainly include: Color & font & text-decoration & text-align & vertical-align & White-space & other & Co ntent; The attributes I have listed are just the most commonly used, not all of them;
8. Before writing code, consider and improve the reuse rate of style;
9. Make full use of HTML itself attributes and style inheritance principle to reduce the amount of code, such as:
- here is the title list 2010-09-15
Defined
Ul.list li{position:relative} ul.list li Span{position:absolute; right:0}
You can realize the date right display
10. The Chinese font name in the style sheet, be sure to turn code into a Unicode code to avoid coding error garbled;
11. The background picture please use Sprite technology as far as possible, reduce the HTTP request, consider the collaboration development of many people, Sprite according to the module production;
12. Use Table label (as far as possible to avoid the use of table tags), please do not use the table properties such as width/height/cellspacing/cellpadding directly define the performance, should be as far as possible by using the table itself private properties to separate the structure and performance, such as Thead,tr,th,td,tbody,tfoot,colgroup,scope; (Cellspaing and CellPadding CSS control methods: table{border:0;margin:0;border-collapse:collapse} table th, table td{padding:0;}, I'll initialize the table style in the Base.css file.
13. Eliminate the use of compatible IE8;
14. Use PNG picture to do picture, request picture format is png-8 format, if png-8 really affect picture quality or have translucent effect, please define the background for IE6 individually:
_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (SizingMethod=crop, src=http:// www.webjx.com/css/' img/bg.png ');
15. To avoid the use of compatibility attributes, such as Text-shadow CSS3 related properties;
16. Reduce the use of properties affecting performance, such as Position:absolute float;
17. Must add the annotation for the big block style, the plot block proper amount annotation;
18. Code indentation and format: suggest a single line of writing, according to their own habits, post-optimization I will be unified treatment;
JavaScript Writing specification
1. File encoding Unified as Utf-8, writing process, each line of code end must have a semicolon; In principle all functions are based on the XXX project requirements of the original development to avoid the internet down the code caused by the code pollution (redundant code and existing code conflict ...);
2. Library Introduction: In principle, only the introduction of jquery library, if the need to introduce third-party libraries, and other team members must discuss the decision;
3. Variable naming: Hump-style naming. Native JavaScript variable requirements are pure English letters, the first letter should be lowercase, such as itaolun;
The jquery variable requires the first character to be "_", and the other is the same as the native JavaScript rule, such as: _itaolun;
In addition, a variable is required to be declared in a set to avoid global variables.
4. Class Name: First letter capitalization, hump-style naming. such as Itaolun;
5. Function name: The first letter lowercase the hump type name. such as Itaolun ();
6. Naming semantics, using English words or abbreviations as much as possible;
7. Avoid the use of compatible and resource-consuming methods or attributes, such as Eval_r () & innertext;
8. In the later optimization, the JavaScript non-annotation class Chinese characters must be converted to Unicode encoding to avoid coding errors when garbled display;
9. The structure of the code is clear, plus a proper amount of comments. improve function reuse rate;
10. Focus on separation with HTML, reduce reflow, pay attention to performance.
Picture Specifications
1. All page element class pictures are put into 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 in lowercase English alphanumeric _ combination, which must not contain the special characters of Chinese character space; Try to use understandable vocabulary to facilitate the understanding of other members of the team; Another, named split tail two parts, with the underline separated, such as Ad_left01.gif btn_submit.gif;
4. Choose the smallest picture format and picture quality to reduce loading time in the case of visual effect;
5. Try to avoid the use of translucent PNG pictures (if used, please refer to the CSS specification related instructions);
6. Use CSS Sprite technology to centralize small background or icons to reduce page HTTP requests, but note that you must draw a reference line in the corresponding sprite PSD source diagram and save it to the IMG directory.
Annotation Specification
1. HTML Comments: Annotation Format ie7-->ie8-->ie6-->opera-->chrome-->safari, recommended installation firebug and IE Tab plus plug-ins.
Other Specifications
1. The development process in strict accordance with the Division of labor to complete the page to improve the CSS reuse rate, to avoid duplication of development;
2. Reduce the heavy redundancy code, write the code that everyone can read. Simple and easy to understand is a virtue. For the sake of the user, for the sake of the server.
