Web Front-end development specifications

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 according to 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 types are HTML5 declaration types, while all types are encoded. Ide is used for hierarchical indentation During writing;
2. In special cases, style files must be external links... In special cases, JavaScript files must be external links to the bottom of the page;
3. When a style file or Javascript file is introduced, the default type declaration must be omitted.
4. introduce JS library file, file name must contain library name and version number and whether it is compressed version, such as jquery-1.7.1.min.js; Introduce plug-in, file name format for Library name + plug-in name, such as jquery. cookie. JS;
5. All codes follow the XHTML standard. The tag & attribute naming must consist of lower-case letters and underline numbers, and all tags must be closed. The 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 existing appropriate labels by default. If not, you can add custom attributes with the prefix "data-" 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
9. Avoid redirection when writing the link address, for example, href = "http://www.jqueryba.com/". Add"/"to the URL address.
10. Avoid using the style attribute on the page, that is, style = "...";
11. A label must be added to an element containing a descriptive form (input, textarea ).
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 lower-case English & numbers & _, such as I _comment, fontred, and width200. Do not use Chinese pinyin, and try to use simple word combinations. In short, names must be semantically named, 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 should start with your own code and underline, such as I _clear;
D) A and B, applicable to pages with a framework created in 2. For example, add a new Div element to the page code of the framework created in 2.
7. CSS attributes are written in sequence. We recommend that you choose layout positioning attributes> text attributes> other attributes. this article can be written according to your habits, but try to ensure that similar attributes are written together. attribute list: 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:
Here is the Title List
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 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 will initialize the table style in the base.css file)
13. How can we reduce 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:
_ 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 a single line, which can be handled in a unified manner according to your habits;

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;
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_r () & 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 must not contain Chinese characters | Spaces | special characters. easy-to-understand words are used to facilitate the understanding of other team members; 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: the comment format, '-' 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;
3. For JavaScript comments, use '// here is a single line comments' for single line comments and use multiple lines of comments;

Development and testing tool conventions

We recommend that you use webstorm | Aptana | DW | vim, which can be selected based on your preferences, but must follow the following principles:
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: Test firefox & IE6 & IE7 & IE8 & ie9 & opera & chrome & safari in the early stage;

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

Link: http://www.jqueryba.com/227.html