Compiling flexible, stable, and high-quality HTML and css code specifications guide _ HTML/Xhtml _ webpage Creation

This article describes how to write a flexible, stable, and high-quality guide to HTML and css code standards. You can refer to the following for more information. Golden Law
Always follow the same encoding specification. No matter how many people participate in the same project, make sure that each line of code is written by the same person.

I. Syntax:
1. Use two spaces to replace tabs );
2. The nested element should be indented once (two spaces );
3. For attribute definitions, make sure that all double quotation marks are used. Do not use single quotation marks;
4. Do not add a slash at the end of the Self-closed element-HTML5 specification (https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) explicitly states that this is optional;
5. Do not omit the optional end tag;
6. Add the standard mode Declaration for the first line of each HTML page to ensure that each browser has a display;

Ii. Language attributes:
According to HTML5 specifications, we recommend that you specify the lang attribute for the HTML root element to set the correct language for the text. this will help the speech synthesis tool determine the pronunciation it should adopt, help the translation tool determine the rules that should be followed during translation, and so on. lang property list: http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

Iii. IE compatibility mode:　　
IE supports using specific labels to determine the IE version of the current page. unless there is a strong requirement, it is best to set it to edge mode to rule IE to adopt the latest mode it supports.

Iv. character encoding:
By declaring the character encoding, the browser can quickly and easily determine the rendering method of the page content. This avoids the use of character entity tags in HTML, so that all are consistent with the document encoding.

5. Introduce css and JavaScript files:
The type attribute is not required when css and JavaScript files are introduced according to HTML5 specifications, because text/css and text/javascript are their default values.

6. Practical application:
Follow HTML standards and semantics as much as possible, but do not at the cost of practicality. Use the least tag at any time and maintain the minimum complexity.

VII. attribute order:
HTML attributes should be arranged in the following order to ensure the code is easy to understand:
1. class
2. id, name
3. data -*
4. src, for, type, href
5. title, alt
6. Aria, role
Class is used to mark highly reusable components, so it should be placed first.

8. Reduce the number of labels
When writing HTML code, try to avoid redundant parent elements. In many cases, this requires iteration and refactoring.

9. tags generated by JavaScript
The tags generated by JavaScript make the content difficult to search and edit, and the performance can be avoided as much as possible.

10. CSS syntax:
1. Use two spaces to replace tabs );
2. When grouping the selector, separate the selector into one row;
3. To make the code easier, add a space in the left curly brackets of each block;
4. declare that the right curly braces of the block should be arranged separately;
5. Each declaration statement should be followed by a space;
6. For more accurate error reports, each statement should have an exclusive row;
7. All declaration statements should end with a semicolon. The semicolon following the last declaration statement is optional. However, if this Semicolon is omitted, the Code may be easier to get out;
8. For attribute values separated by commas, a space should be inserted after each comma;
9. For attribute values or color parameters, omit 0 before the decimal point smaller than 1 (for example, 0.5 instead );
10. hexadecimal values should all be in lower case, for example: # fff. Use a hexadecimal value in short format, for example, replace # fff with # ffffff;
11. Add double quotation marks for the attributes in the selection, for example, input [type = "text"];
12. Avoid specifying the unit for the value 0. For example, use margin: 0 instead of margin: 0px.

11. Declaration Order:

Relevant attribute declarations should be grouped into a group in the following order:

1. positioning (position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100 ;);
2. box model (display: block; float: left; width: 100px; height: 100px ;);
3. typographic (font: normal 13px "Microsoft YaHei"; line-height: 1.5em; color: #333; text-align: center ;);
4. visual (background: yellow; border: 1px solid # c00; border-radius: 3px; opacity: 1 ;);
　　　
Positioning can remove elements from normal document streams and overwrite box model styles. the box model ranks second because it determines the size and position of the build. other attributes affect the internal (inside) of the group, or do not affect the first two groups of attributes.

12. Do not use @ import　　
Compared with the tag, the @ import command is much slower, not only increasing the number of additional requests, but also leading to unexpected problems. There are several alternative methods:
1. Use multiple elements;
2. Use sass or less similar css preprocessors to separate multiple css files into one file;
3. css file merging is provided through rails, jekyll, or other systems.

13. media query location
Store media queries near relevant rules as much as possible. Do not package them in a single style file or at the bottom of the document.

14. prefix attributes:
When a prefix attribute of a specific vendor is used, the values of each attribute are aligned vertically by locking the attribute to facilitate multi-row editing. For example:

Copy the content to the clipboard using CSS Code.

1. . Selector {
3. -Webkit-box-shadow: 0 1px 2px rgba (0, 0,. 15 );
5. Box-shadow: 0 1px 2px rgba (0, 0,. 15 );
7. }

15. Single Row rule declaration:
For styles whose values contain a declaration, it is recommended that the statement be placed in the same row for ease of modification and quick editing. for styles with multiple declarations, the declaration should be divided into multiple rows. the key factor for this is error detection. for example, the css validator has a syntax error in row 180. If it is a single-row statement, you will not ignore this error. If it is a single-row statement with multiple statements, you need to analyze it carefully to avoid missing errors.

16. nesting in Less and Sass
Avoid unnecessary nesting. this is because although you can use nesting, it does not mean that nesting should be used. nesting can be used only when the style must be restricted to the parent element (that is, the descendant selector) and multiple element teachers need to be nested.

17. Notes:
Code is compiled and maintained by people. Make sure that your code can be self-described, well-Annotated, and easy for others to understand. A good code annotation can deliver context and code purpose;
Do not simply repeat the component or class name;
For long comments, make sure to write complete sentences. For general comments, you can write brief phrases.

18. class naming
The class name can only contain characters such as Xie xiaocharacter and broken number (not an underscore or a hump name). The broken number should be used for the name of the relevant class (similar to namespaces such as. btn and. btn-danger)
Avoid excessive abbreviations. btn stands for button, but. s cannot express any meaning;
The class name should be as short as possible and clear;
Use meaningful names, organizational or objective-specific names, and do not use explicit names;
Use the latest class or basic class as the prefix of the new class;
Use. js-* class to identify behavior (relative to style) and do not include these classes in css files;
When naming sass and less variables, you can also refer to the Rules listed above.

19. Selector
The use of class for general elements facilitates the optimization of rendering performance;
For frequently-occurring components, avoid using attribute selectors (for example, [class ^ = "·"]). browser performance will be affected by these factors;
The selector should be as short as possible, and the number of elements that constitute the selector should be limited as much as possible. It is recommended that no more than three;
Only when necessary can the class be restricted to the nearest parent element.

20. Code Organization:
Organize code segments in units of organization;
Specify consistent annotation specifications;
Use the same blank space to separate the code into blocks, which facilitates scanning large documents;
If multiple css files are used, they are split in the form of components rather than pages, because the pages are reorganized and the components are moved only.

The above is all the content of this article, hoping to help you write standardized, flexible, stable, and high-quality HTML and css code.

Original article: http://www.cnblogs.com/codinganytime/p/5258223.html