Web Front End Specification

Whether from the perspective of technology or development, for the Web front-end development specification documents have a certain standard, this article on the development prospects of CSS3 and HTML5 a series of web development documents, for your reference only.

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 follow this document specification for foreground page development. If this document is incorrect or inappropriate, please submit it in a timely manner, after the discussion of the decision can be changed.

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 claim type <! DOCTYPE html>; Encoding unified for <meta charset= "UTF-8″/&GT;, 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 + 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 to the containing descriptive form element (input, textarea), such as <p> name: <input type= "text" id= "name" name= "name"/></p> must 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 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 < (<) & > (&gt;) & 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 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, applies to pages that have already 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,
According to the law of a nomenclature: <div id= "Mainnav" ><div class= "Firstnav" &GT;...&LT;/DIV&GT;&LT;/DIV&GT;
Style:? #mainnav?. Firstnav{...}
Press B to name the law: <div id= "Mainnav" ><div class= "Main_firstnav" &GT;...&LT;/DIV&GT;&LT;/DIV&GT;
Style:?. Main_firstnav{...}
7. CSS property Writing order, it is recommended to follow the layout positioning properties –> own 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. Property enumeration: Layout positioning properties mainly include: Margin & padding & float (including clear) & position (corresponding Top,right,bottom,left) and display & visibility & Overflo W etc; The main properties include: Width?& height?& background?&? border; Text attributes include: Font & color & text-align & text-decoration & text-indent, etc. other properties include: List-style (List style) & vertical-vlign & Cursor & Z-index (stacking order) & Zoom etc. The attributes I have listed are only the most commonly used, not 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>
Defined
Ul.list li{position:relative}? ul.list li Span{position:absolute; right:0}
You can 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; (CSS control methods for Cellspaing and cellpadding: 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. 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 natively developed according to the requirements of the XXX project to avoid the code pollution caused by the code down on the Internet (sink 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. Variable name: Camel named. The native JavaScript variable requires a plain English letter, and the first letter must 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;
Another requirement is to declare the variables centrally, 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, in order to avoid coding errors when garbled display;
9. The code is structured and commented appropriately. improve function reuse rate;
10. Focus on separation from HTML, reduce reflow, and focus on 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.

Source Document

Web Front End Specification