How to Write standardized, flexible, stable, and high-quality HTML and css code

How to Write standardized, flexible, stable, and high-quality HTML and css code
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.

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;

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/

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.

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.

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.

Practical:

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.

Attribute order: HTML attributes should be arranged in sequence to ensure the code is easy to understand:

1. class2.id, name 3. data-* 4.src, for, type, href 5. title, alt 6. Aria, and role class are used to indicate highly reusable components, so they should be placed first.

Reduce the number of labels

When writing HTML code, try to avoid redundant parent elements. In many cases, this requires iteration and refactoring.

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.

CSS syntax:

1. use two spaces to replace tabs. 2. when grouping a 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. the right curly braces of the block should be separated; 5. for each statement: a space should be inserted next to it; 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, the value 0 before the decimal point smaller than 1 is omitted (for example. 5 instead of 0.5); 10. hexadecimal values should all be in lower case. For example: # fff, use the abbreviated hexadecimal value, for example, # fff instead of # ffffff; 11. add double quotation marks to the selected attributes, for example, input [type = "text"]; 12. avoid specifying the unit for the value 0. For example, use margin: 0 instead of margin: 0px.

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;); Because positioning can remove elements from normal document streams, it also covers box model-related styles, so it ranks first. 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. reference http://twitter.github.io/recess/

Do not use the @ import command. Compared with the tag, the @ import command is much slower, not only increasing the number of requests, but also leading to unexpected problems. There are several alternative methods:

1. use multiple elements; 2. multiple css files are considered as one file through sass or less similar css Preprocessor; 3. css file merging is available in rails, jekyll, or other systems.

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.

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:. selector {

-Webkit-box-shadow: 0 1px 2px rgba (0, 0,. 15 );

Box-shadow: 0 1px 2px rgba (0, 0,. 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.

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.

Note:

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, you must write a complete sentence. For general comments, you can write an introduction phrase.

Class Name

The class name can only contain characters such as Xie xiaocharacter and broken number (not an underscore or camper ). the break number should be used for the name of the relevant class (similar to the namespace, for example. btn and. btn-danger) to avoid excessive shorthand .. btn indicates the button,. s cannot express any meaning; class names should be as short as possible and have clear meanings; Use meaningful names, use organized or purposeful names, and do not use representations; use the latest class or basic class as the prefix of the new class. 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.

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 may 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.

Code Organization:

Organize code segments in units; Specify consistent annotation specifications; separate codes into blocks using consistent spaces, which facilitates scanning large documents; if multiple css files are used, split the component in the form of a component instead of a page because the page is reorganized and the component is moved only. source: http://www.css88.com/doc/codeguide/