Standard Web Front-end development documentation (for reference only)

Purpose
This document is specially formulated to improve team collaboration efficiency, facilitate background staff to add functions, optimize and maintain the front-end, and output high-quality documents. once confirmed, front-end developers must develop front-end pages in accordance with the specifications of this document. if any errors or exceptions are found in this document, please submit them in a timely manner and make changes after discussion.

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.

Document specifications
1. html, CSS, JS, and images files are all archived to the <System Development specifications> agreed directory;
2. HTML file name: English name, suffix .htm. at the same time, the corresponding interface draft is stored in the same directory. If the interface draft is named as Chinese, rename it with the same name as the HTML file to facilitate searching the corresponding page when the backend function is added;
3. CSS file name: English name, suffixed with. CSS. base.css, index.css on the first page, and other pages are named according to actual module requirements .;
4. js file name: English name, suffix. js. share common. JS, other names according to actual module requirements.

HTML writing Specification
1. Document Type Declaration and encoding: all are HTML5 declaration types. <! Doctype HTML>; the encoding is unified to <meta charset = "GBK"/>, and the IDE is used to achieve layer-specific indentation During writing;
2. In non-special cases, style files must be external links to 3. When a style file or Javascript file is introduced, the default type declaration must be omitted. The statement is as follows (it is recommended to place the JS file at the bottom of the page for import, except for JS frameworks such as jquery ):

Examplesource code[Www.52css.com]

<LINK rel = "stylesheet" href = "..."/>
<Style>... </style>
<SCRIPT src = "..."> </SCRIPT>

4. introduce JS library file, file name must contain library name and version number and whether it is compressed version, such as jquery-1.4.1.min.js; Introduce plug-in, file name format for Library name + plug-in name, such as jquery. cookie. JS;
5. all codes comply with the XHTML standard. tags & attributes & attribute names must consist of lowercase letters and underline numbers, and all tags must be closed, including Br (<br/> ), HR (<HR/>); attribute values must be enclosed in double quotation marks;
6. make full use of HTML tags without compatibility issues, such as span, em, strong, optgroup, and label. When you need to add custom attributes to HTML elements, first, consider whether there are any existing appropriate labels by default. If not, you can use the prefix "data-" to add custom attributes to avoid using "data: "and other naming methods;
7. semantic html. For example, if the title uses H * Based on importance (only one H1 can be found on the same page), P is used for section marking, UL is used for the List, and block-level elements cannot be nested in inline elements;
8. minimize Div nesting, such as <Div class = "box"> <Div class = "welcome"> welcome to XXX, your account name is <Div class = "name"> User Name </div> and can be replaced by the following code: <Div class = "box"> <p> welcome to XXX. Your username is <span> User Name </span> </P> </div>;
9. Avoid redirection when writing a link address, for example, href = "http://itaolun.com/", that is, add "/" after the URL address;
10. Avoid using the style attribute on the page, that is, style = "... ";
11. You must add a label for an input (textarea) element, as shown in figure

Examplesource code[Www.52css.com]

<P> last name: <input type = "text" id = "name" name = "name"/> </P>
Must be written:
<P> <label for = "name"> last name: </label> <input type = "text" id = "name"/> </P>

12. Try to write the image that can be rendered as a background to the CSS style;
13. The ALT attribute must be added to important images, and the title must be added to important elements and truncated elements;
14. Add comments to the block code and important functions (such as loops) to facilitate adding functions to the background;
15. use special symbols: Use code as much as possible, for example, <(<) &> (>) & Space;
16. When writing pages, consider backward scalability;
17. For more information about class and ID, see CSS writing standards.

CSS writing specifications
1. The encoding is UTF-8;
2. collaborative Development and division of labor: I will write a general framework file in advance based on each module and similar programs on the page, and assign it to the front-end personnel for internal structure, performance, and behavior. I will write the shared cssfile base.css by I, during collaborative development, every page must be introduced. This file contains the reset and the style at the bottom of the header. This file cannot be modified at will;
3. use of class and ID: ID is unique and parent, class can be repeated and sub-level, so ID is only used in large modules, class can be used in high reuse rate and sub-level; IDs are in principle named when I distribute framework files, except for the hooks reserved for JavaScript;
4. Name the hooks reserved for Javascript. Start with JavaScript _, such as js_hide and js_show;
5. class and ID naming: large framework names, such as Header/footer/wrapper/left/right, are uniformly named by I in 2. other style names are named by combination of lowercase letters, numbers, and underscores (_), such as I _comment, fontred, and width200. Do not use Chinese pinyin. Try to use simple word combinations. In short, naming should be semantically and concise.
6. Avoid class and ID naming (this article is important. If you do not understand it, please communicate with I in a timely manner ):
A. Avoid using subordinate writing. For example, see D;
B. Name the parent-level element ID/class. For example, see D;
C. names with high repeated usage. Start with your own code and underline, for example, I _clear;
D, A, and B, applicable to pages with a framework created in 2, for example,

Examplesource code[Www.52css.com]

Add a new Div element to the <Div id = "mainnav"> </div> Page code of the framework created in 2,
Follow the naming convention A: <Div id = "mainnav"> <Div class = "firstnav">... </div>,
Style Writing: # mainnav. firstnav {.......}
Follow the naming rules of B: <Div id = "mainnav"> <Div class = "main_firstnav">... </div>,
Style Syntax:. main_firstnav {.......}

7. CSS attribute writing sequence. We recommend that you follow: Layout positioning Attributes --> text attributes --> other attributes. this article can be written according to your habits, but try to ensure that the similar nature is written together.

Examplesource code[Www.52css.com]

Attribute list:
The layout positioning attributes mainly include: display & list-Style & position (corresponding top, right, bottom, left )&
Float & clear & visibility & overflow;
Attributes mainly include: width & Height & margin & padding & Border & background;
Text attributes mainly include: Color & font & text-Decoration & text-Align & vertical-Align & white-space &
Others & content;
The attributes I listed are only the most commonly used and do not represent all;

8. before writing the code, consider and improve the style reuse rate;
9. Make full use of HTML attributes and style inheritance principles to reduce the amount of code, such:

Examplesource code[Www.52css.com]

<Ul class = "list"> <li> Title List <span> 2010-09-15 </span> </ul>
Definition
Ul. List Li {position: relative} ul. List Li span {position: absolute; Right: 0}
The right-side display of the date

10. Chinese characters in the style sheet must be transcoded to Unicode to avoid garbled Characters During encoding errors;
11. Use sprite technology as much as possible to reduce HTTP requests. Sprite is made by module considering collaborative development by multiple people;
12. when using Table labels (avoid using Table labels whenever possible), do not use table attributes such as width, height, cellspacing, and cellpadding to directly define the performance, the Structure and Performance of table private attributes should be separated as much as possible, such

Examplesource code[Www.52css.com]

Thead, TR, Th, TD, tbody, tfoot, colgroup, scope;
(CSS Control Methods for cellspaing and cellpadding:
Table {border: 0; margin: 0; border-collapse: collapse;} table th, table TD {padding: 0 ;},
In the base.css file, I Will initialize the table style)

13. Disable <meta http-equiv = "X-UA-compatible" content = "Ie = 7"/> IE8 compatibility;
14. When PNG image is used for the image, the image format is required for the png-8 format, if the png-8 really affects the quality of the image or the translucent effect, Please define the background for IE6:

Examplesource code[Www.52css.com]

_ Background: none; _ filter: progid: DXImageTransform. Microsoft. alphaimageloader
(Sizingmethod = crop, src = 'img/bg.png ');

15. Avoid using compatibility attributes, such as text-shadow | related attributes of css3;
16. Reduce the performance impact attributes, such as position: absolute | float;
17. You must add comments to the large block style and comments to the right of the block;
18. Code indentation and format: it is recommended to write in a single row. According to your habits, I will be optimized in a unified manner in the future;

Javascript writing Specification
1. the file encoding is UTF-8, and the writing process is too long. Each line of code must end with a semicolon. In principle, all functions are developed based on the requirements of the XXX project, to avoid code contamination caused by code falling down from the Internet (redundant code | conflicts with existing code | ...);
2. Library Introduction: in principle, only the jquery library is introduced. If you need to introduce a third-party library, you must discuss and decide with other team members;
3. variable naming: camper naming. Native JavaScript variables must be letters only and the first letter must be lowercase, such as itaolun;

Examplesource code[Www.52css.com]

Jquery variables must start with '_'. Others are the same as native JavaScript rules, such as _ itaolun;
In addition, variables must be declared in a centralized manner to avoid global variables.

4. Class naming: the first letter is in upper case, and the camper name, for example, itaolun;
5. Function naming: name the first letter in lower case. For example, itaolun ();
6. Name semantics. Use English words or abbreviations as much as possible;
7. Avoid using methods or attributes with compatibility and resource consumption, such as eval () & innertext;
8. During later optimization, Chinese characters in the Javascript non-annotation class must be converted to unicode encoding to avoid garbled display during encoding errors;
9. The code structure is clear, and a proper amount of comments are added to improve the function reuse rate;
10. Focus on HTML separation, reduce reflow, and focus on performance.

Image specifications
1. All page element images are placed in the IMG folder, and the test images are placed in the img/demoimg folder;
2. The image format is limited to gif | PNG | JPG;
3. the name must be a combination of lower-case English Letters | numbers | _, which cannot contain Chinese characters | Spaces | special characters. easy-to-understand words can be used as much as possible for other team members to understand; in addition, the name is divided into two parts, separated by underscores, such as ad_left01.gif | btn_submit.gif;
4. Select the minimum image format and quality to reduce the loading time while ensuring the visual effect;
5. Avoid using translucent PNG images as much as possible (For details, refer to the CSS specifications );
6. Use the CSS sprite technology to set a small background image or icon to reduce the page HTTP request. However, be sure to draw a reference line in the corresponding sprite PSD source image and save it to the IMG directory.

Annotation Specification
1. html comment: Comment format <! -- Here is the comment -->, '--' can only be at the beginning and end of the comment, and cannot be placed in the comment text area;
2. CSS annotation: annotation format/* here is the annotation */;
3. For JavaScript comments, use '// here is the single line comments' for single line comments, and use/* Here there are multiple lines of comments */;

Development and testing tool conventions
We recommend that you use Aptana | DW | vim, which can be selected based on your preferences. The following principles must be followed:
1. The view mode of IDE cannot be used to 'draw 'code;
2. You cannot use ide To generate related function code, such as some built-in function Js of DW;
3. encoding must be formatted, such as indentation;
Test Tool: Only firefox & IE6 & IE7 & IE8 will be tested during preliminary development. Opera & chrome & Safari will be added for later optimization;
Recommended test sequence: Firefox --> IE7 --> IE8 --> IE6 --> opera --> chrome --> safari. We recommend that you install the firebug and IE tab plus Plug-ins.

Other Specifications
1. Complete pages strictly by division of labor during development to improve CSS Reuse Rate and avoid repeated development;
2. Reduce redundant code and write code that everyone can understand. being concise and easy to understand is a virtue. For the sake of users and servers.