How to write specifications, flexible, stable, high-quality HTML and CSS code

Golden Law

Always follow the same set of coding specifications, regardless of how many people are involved in the same project, make sure that each line of code is written like the same person.

Grammar:

1. Use two spaces instead of tabs (tab); 2. Nested elements should be indented one time (two spaces); 　　 3. For the definition of attributes, make sure to use double quotes, never use single quotes 　　 ; 4. Do not add a slash--HTML5 specification (Https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) at the end of the self-closing element This is optional; 　 5. Do not omit the optional end tag; 6. Add the declaration of the standard schema to the first line of each HTML page to ensure that one is present in each browser;

Language attributes:

According to the HTML5 specification, it is recommended 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 use, help the translation tool determine the rules to be followed in translating, and so on. lang attribute list:/http www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

IE Compatibility mode:

IE supports the use of specific tags to determine the version of IE that should be used for the current page of receipts. Unless there is a strong demand, it is best to set it to edge mode, which governs IE with the latest modes it supports.

Character encoding:

By declaring character encoding, you can ensure that your browser can quickly and easily determine how the page content is rendered. This avoids the use of character entity tags in html, which is all consistent with document encoding.

Introducing CSS and JavaScript files:

Depending on the HTML5 specification, it is generally not necessary to specify the type attribute when introducing CSS and JavaScript files, because Text/css and text/javascript are their default values respectively.

Practical for the King:

Try to follow HTML standards and semantics, but not at the expense of practicality. Always try to use the fewest labels and keep the minimum complexity.

Attribute order: HTML attributes should be arranged in the following order to ensure readability of the code:

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 and should therefore be ranked first.

Reduce the number of labels

When you write HTML code, try to avoid unnecessary parent elements. Many times, this requires iterative and refactoring to implement.

JavaScript-generated tags

Tags generated through JavaScript make content difficult to find, edit, and position performance. To avoid is to avoid as much as possible.

CSS syntax:

1. Use two spaces instead of tabs (tab); 　　2. When grouping selectors, separate selectors on a single line; 　　3. For the readability of the code, add a space in the left curly brace of each declaration block; 　　4. The right curly brace of the declaration block should be taken separately; 　　5. Each declaration statement: The following should insert a space; 　　6. In order to obtain a more accurate error report, each statement should be exclusive one line; 　　7. All declaration statements should end with a semicolon, and the semicolon after the last declaration statement is optional, but if you omit the semicolon, the code may be easier to get out of; 　　8. For comma-separated attribute values, a space should be inserted after each comma; 　　9. For attribute values or color parameters, omit 0 (for example,. 5 instead of 0.5) in front of decimals less than 1. 　　10.16 binary values should be all lowercase, for example: #fff, use abbreviated hexadecimal values as much as possible, such as #fff instead of #ffffff; 　　11. Add double quotes for the selected attribute, for example input[type= "text"]; 　　12. Avoid specifying units for 0 values, for example with margin:0 Instead of margin:0px.

Declaration Order:

The related attribute declarations should be grouped into groups and arranged 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 (positioning) removes elements from the normal flow of documents and also overrides the box model-related styles, it is ranked first. The box model ranked second because he decided on the size and position of the building. Other attribute knowledge affects the internal ( Inside) or does not affect the first two groups of properties, so it is in the back. Reference http://twitter.github.io/recess/ 　　　

Do not use @import compared to tags, @import instructions are much slower, not only adding additional requests, but also causing unforeseen problems. There are several alternatives:

1. Use multiple elements; 　　　　　 2. Using a CSS preprocessor like sass or less to think of multiple CSS files as a single file 　　　　　 ; 3. css file merging is provided through rails, Jekyll, or other systems.

Location of media query

Keep media queries close to the relevant rules as much as possible. Don't pack them in a single style file or at the bottom of the document.

Attributes with prefixes:

when using a specific vendor-prefixed attribute, the value of each property is aligned vertically by locking it so that multiple lines of editing can be made easier. For example: . selector {

-webkit-box-shadow:0 1px 2px Rgba (0,0,0,.15);

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

}

Single-line rule declaration:

For a value that contains a declared style, it is recommended that you put the statement on the same line for readability and for quick editing. For styles with multiple declarations, the declaration should be divided into multiple lines. The key factor in doing this is to detect errors. For example, the CSS validator is in 180 lines with syntax errors, if it is a single-line statement, You will not ignore this error, if it is a single statement, you need to carefully analyze to avoid missing the error.

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. Only if the style must be restricted within the parent element (that is, the descendant selector), and there are multiple elements that require nesting to use nesting.

Comments:

Code is written and maintained by people. Make sure your code is self-descriptive, well-commented, and easy for others to understand. Good code annotations can pass context and code purposes;
do not simply reiterate the component or class name; for longer annotations, be sure to write a complete sentence, and for a general comment, you can write an introductory phrase.

Class naming

only small characters and dashes (not underscores or camel-named) can appear in class names. Dashes should be used for naming related classes (like namespaces such as. btn and. Btn-danger) avoid excessive arbitrary shorthand: btn represents a button, but. s cannot express any meaning; 　　 The class name should be as short as possible and 　　 have a clear meaning; Use a meaningful name, use an organized or purposeful name, and do not use the name of the representation; 　　 based on the nearest class or basic class as the new class prefix 　　 ; use the. js-* class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file; 　　 You can also refer to the specifications listed above for naming sass and less variables.

Selector Selector

use class for common elements, which facilitates rendering performance optimization; 　　 for frequently occurring components, avoid using the attribute selector (e.g. [class^=]), the performance of the browser will be affected by these factors; 　　 The selector is as short as possible and limits the number of elements that make up the selector, and it is recommended not to exceed 3; 　　 The class is restricted to the nearest parent element only when necessary.

Code organization:

organize the code snippets in the form of units; 　　 Specify a consistent annotation specification; 　　 separate the code into blocks using a consistent whitespace character, which facilitates scanning of larger documents; 　　 if more than one CSS file is used, it is split as a component rather than a page, because the page is reorganized and the component is only moved. article source: http://www.css88.com/doc/codeguide/

How to write specifications, flexible, stable, high-quality HTML and CSS code