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 is placed 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. Common 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″/>, 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 + plugin 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 issues of the HTML itself tags, such as span, EM, strong, optgroup, label, etc., when you need to add custom attributes for HTML elements, first consider whether there is a default existing appropriate label to set, if not, You can use the prefix "data-" 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> username </ 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 added with ALT attribute, plus title for 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 program, in advance to write the general framework files, assigned to the front-end personnel to achieve internal structure & performance & behavior; shared css file base.css by I, in collaborative development, Every 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 Usage: ID is unique and parent, class is repeatable and child, so ID is used only on large modules, class can be used in high repetition rate and children; 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 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" >...</DIV></DIV>style: #mainnav. firstnav{...}Press B to name the law: <div id= "Mainnav" ><div class= "Main_firstnav" >...</DIV></DIV>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 the same attributes are written together. Attribute enumeration: Layout positioning properties include: Margin & padding and float (including clear) & position (corresponding Top,right,bottom,left) and display & visibility and overflow, etc., the main properties include: Width & height &A mp 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>definitionul.list li{position:relative} ul.list li Span{position:absolute; right:0}you can achieve the right display of the date10. 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 define the performance directly with the table attribute such as width/height/cellspacing/cellpadding. As far as possible, the use of table's own private property separation structure and performance, 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 | | CSS3 related attributes;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 XXX project requirements to avoid the code pollution caused by the code down on the Internet (Shen 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;jquery variables require the first character to be ' _ ', the other is the same as the native JavaScript rules, such as: _itaolun;In addition, it is required 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, to avoid coding errors when garbled display;9. The code structure is clear, add appropriate comments. improve function reuse rate;

10. Focus on separation from HTML, reduce reflow, pay attention to 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 | | number | | _ combination, which must not contain Chinese characters | | space | | special characters; make it easy for other members of the team to understand, and make it easier for the rest of the group to be understood; another, name split tail 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 Specifications1. 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 redundant code, write code that everyone can read. Simplicity is a virtue. For the sake of the user, for the sake of the server.

Common HTML, CSS, JavaScript front-end naming conventions