Common HTML, CSS, JavaScript front-end naming conventions

No intention to find themselves folder inside there is such a file, specifically from where to do not remember, look carefully, found the summary is very good, paste out to share.

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 when adding 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 encoding: Unified for HTML5 claim type <! DOCTYPE html>; Code Unified for <meta charset= "Utf-8″/&gt, writing with the IDE to achieve a hierarchical indentation; 2. In non-special cases, style files must be linked to

Class & ID See CSS Writing specifications.

CSS writing specification 1. The code is unified as 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 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 children; The 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 is named by I in 2. 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 is semantic and concise. 6. Avoid class and ID name (this article is important, if you do not understand please timely and I communication): A, through the subordinate way to avoid, example see D;B, take the parent element Id/class named part of the name, example see D;c, 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 the page that has been built in 2, such as the page code to be framed in 2 <div id= "Mainnav" ></div> add a new div element, press a nomenclature: <div id= "Mainnav "><div class=" Firstnav "&GT;...&LT;/DIV&GT;&LT;/DIV&GT; Style:   #mainnav  .firstnav{...} press the B-name rule: < Div id= "Mainnav" ><div class= "Main_firstnav" &GT;...&LT;/DIV&GT;&LT;/DIV&GT; style notation:  .main_firstnav{.......}7. CSS property Writing order, it is recommended to follow the clothThe local Location property –> its own property –> the Text property –> 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; 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 the most commonly used ones 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 > Definition 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 stylesheet, 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 produced by module; 12. When using table tags (avoid using table tags as much as possible), do not directly define the performance with table attributes such as width/height/cellspacing/cellpadding, and 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 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 you make a picture with a PNG image, ask for a picture format of 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:D XImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=crop, src= ' img/bg.png '); 15. Avoid the use of compatibility attributes, such as Text-shadow | | CSS3 related properties; 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 you need to introduce a third-party library, to discuss the decision with other team members; 3. Name of the variable: camel-named. Native JavaScript variables require a plain English letter, the first letter must be lowercase, such as the Itaolun;jquery variable requires the first character is ' _ ', the other is the same as the native JavaScript rules, such as: _itaolun; Also, requires that the variable set declaration, avoid 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. Try to 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 structure is clear, add appropriate comments. Improve the function reuse rate;

10. Focus on separation from HTML, reduce reflow, pay attention to performance.

Picture Specification 1. All page element class pictures are placed in the IMG folder, the test is placed in the Img/demoimg folder; 2. Picture format limited to GIF | | PNG | | Jpg;3. Name all in lowercase English alphabet | | 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. Choose the smallest picture format and picture quality in case of visual effects to reduce load time; 5. Try to avoid using translucent PNG images (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.

Note Specification 1. HTML Comment: Note format <!– here is the comment –>, ' – ' can only be in the beginning and ending of the comment, not 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 contract recommendations using 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. The IDE can not be used to generate related function code, such as the DW built-in features Js;3. The encoding must be formatted, such as indentation; test tools: Pre-development Test FireFox & IE6 & IE7 & IE8, add Opera & Chrome & Safari in post-optimization, recommended test order: firefox– >ie7–>ie8–>ie6–>opera–>chrome–>safari, it is recommended to install Firebug and IE Tab plus plug-ins. 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 code and write code that everyone can read. Simplicity is a virtue. For the sake of the user, for the server.

Common HTML, CSS, JavaScript front-end naming conventions