Specifications for writing flexible, stable, high-quality HTML and CSS code

First, the Golden law: The always follows the same set of coding specifications.
No matter how many people join the same project , make sure that each line of code is written as if it were the same person.


html section

Span style= "font-family: Microsoft Jacob Black;" > syntax

• Use two spaces instead of tabs (tab)- This is the only way to ensure consistent presentation in all environments.
• Nested elements should be indented once (that is, two spaces)
• For the definition of attributes, be sure to use double quotes, never use single quotes
• Do not add a slash at the end of a self-closing (such as a,<meta> or ) element-The HTML5 specification explicitly indicates that this is optional
• Do not omit the optional end tag (closing tag) (for example,,</li> or </body>).

HTML5 DOCTYPE
adding standard mode declarations to the first line of each HTML page ensures consistent representation in each browser.

language attributes lang= "en-us">
It is strongly recommended that you specify the lang attribute for the HTML root element to set the correct language for the document. This will help the speech synthesis tool determine the pronunciation it should use , and help the translation tool determine the rules it should follow when translating .

IE compatibility mode <meta http-equiv="x-ua-compatible" content= "Ie=edge">
IE supports the use of specific <meta> tags to determine which version of IE should be used to draw the current page. Unless there is a strong special need, it is best to set it to edge mode, which informs IE to use the latest mode it supports.

character encoding <meta charset= "utf-8"> by explicitly declaring character encodings, you can ensure that your browser is quick and easy to determine how the page content is rendered . The advantage of this is that you can avoid using character entity tags (character entity) in HTML, which is all consistent with the document encoding (UTF-8 encoding is generally used).
introducing CSS and Javascript filesaccording to 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 Kingtry to follow HTML standards and semantics, but not at the expense of practicality. try to use the fewest tags and keep the minimum complexity at all times.

attribute Order
HTML attributes should be arranged in the order given below to ensure readability of the code.

• Class
• ID, name
• data-*
• SRC, for, type, href
• Title, Alt
• aria-*, role

class is used to identify highly reusable components and should therefore be ranked first. ID is used to identify specific components and should be used with caution (for example, bookmarks within a page), so it is ranked second.

Boolean (Boolean) attribute <input type= "text" disabled>
A Boolean property can be declared without assigning a value. The XHTML specification requires that it be assigned a value, but the HTML5 specification does not.

reduce the number of labels
When writing HTML code, try to avoid unnecessary parent elements.

JavaScript-Generated tags
tags generated by JavaScript make content difficult to find, edit, and degrade performance . Avoid as much as you can avoid.


CSS Section

Grammar

• Use two spaces instead of tabs (tab)- This is the only way to ensure consistent presentation in all environments .
• When grouping selectors, separate selectors are placed on a single line.
• For readability of the code, add a space before the left curly brace of each declaration block.
• The closing curly brackets of the declaration block should be taken separately.
• After each declaration statement, insert a space.
• For a more accurate error report, Each statement should be exclusive to one line .
• all declaration statements should end with a semicolon . The semicolon after the last declaration statement is optional, but if you omit the semicolon, your code may be more prone to errors.
• For comma-separated attribute values, you should insert a space after each comma (for example, Box-shadow).
• Do not insert a space after a comma inside the RGB (), Rgba (), HSL (), Hsla (), or rect () values. This makes it easy to distinguish multiple color values (with commas and no spaces) from multiple attribute values (plus commas and spaces).
• For attribute values or color parameters, omit 0 (for example,. 5 instead of 0.5;-.5px instead of -0.5px) in front of decimals less than 1.
• Hexadecimal values should all be lowercase, for example, #fff. When you scan a document, lowercase characters are easy to distinguish because their form is easier to distinguish.
• Try to use shorthand hexadecimal values, for example, #fff instead of #ffffff.
• Add double quotes for the attributes in the selector, for example, input[type= "text"]. Only in some cases is optional, but for code consistency, it is recommended that you add double quotes.
• 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:

• Positioning positioning
• Box Model Boxes
• Typographic printing
• Visual visual

because positioning (positioning) can remove elements from the normal document flow, It also covers the box model-related styles and is therefore ranked first. The box model is ranked second because it determines the size and position of the component.   
other properties only affect components The internal (inside) or not affects the first two sets of properties, so it is in the back.

don't use @import
compared to <link> tags, The @import instructions are much slower, not only increasing the number of requests, but also causing unforeseen problems. There are several alternatives:   

• Use multiple <link> elements
• Compile multiple CSS files into a single file by using a CSS preprocessor similar to Sass or less
• CSS file merging provided through Rails, Jekyll, or other systems

location of media query
Place Media queries near the rules that are as relevant as possible. Don't pack them in a single style file or at the bottom of your document. If you separate them, you will only be forgotten in the future .

attributes with a prefix
when using a specific vendor-prefixed attribute, the value of each property is indented vertically to make it easier for multiple lines of editing.

single-line rule declaration
for a style that contains only one declaration , it is recommended that you put the statement on the same line for readability and for quick editing. For styles with multiple declarations, you should also divide the declaration into multiple lines.
the key factor in doing this is for error detection-for example, the CSS validator indicates that there is a syntax error in line 183. If it is a single statement, you will not ignore the error, and if it is a multi-line statement, you will have to analyze it carefully.

attribute declarations in shorthand form
in cases where all values need to be displayed, limit the use of shorthand attribute declarations as much as possible. The common misuse of shorthand attribute declarations is as follows:

• Padding
• Margin
• Font
• Background
• Border
• Border-radius

In most cases, we do not need to specify all values for the shorthand property declaration. For example, the heading element of HTML only needs to set the value of the top, bottom margin (margin), so if necessary, just overwrite the two values. Excessive use of shorthand attribute declarations can lead to code clutter and unnecessary overwriting of property values causing unintended side effects.

nesting in less and Sass
avoid non-essential nesting. This is because although you can use nesting, it does not mean that nesting should be used. Nesting is only used if the style must be restricted within the parent element (that is, the descendant selector) and there are multiple elements that need to be nested.

Notes
code is written and maintained by people. Make sure your code is self-describing, well-commented, and easy for others to understand. Good code comments can convey context and code purposes. Do not simply reiterate the component or class name.
for longer annotations, be sure to write a complete sentence; For general annotations, you can write concise phrases.

class naming

• class) can appear in the Dashe name (not underlined, Nor is it a hump-named method). Dashes should be used to name the relevant class (similar to namespaces) (for example,. btn and. Btn-danger).
• avoid excessive arbitrary shorthand. BTN Rep   button , but. s cannot express any meaning.
• class name should be as short as possible and meaningful.
• use meaningful names. Use an organized or purposeful name, and do not use the name of the representation (presentational).
• based on the nearest parent class or base (base) Class as the new class prefix.   
• use. js-* Class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file.

It is also possible to refer to the specifications listed above for naming Sass and less variables.

Selector Selector

• Use class for common elements, which facilitates rendering performance optimizations.
• For frequently occurring components, avoid using the property selector (for example, [class^= ...]). The performance of the browser is affected by these factors.
• The selector should be as short as possible, and limit the number of elements that make up the selector as much as possible, and do not recommend more than 3.
• Restrict the class to the nearest parent (that is, the descendant selector) only when necessary (for example, when you do not use a prefixed class-the prefix is similar to a namespace)

Code Organization       

• Organizes code snippets in units of components.
• Develop a consistent annotation specification.
• Separate the code into blocks with consistent whitespace characters, which facilitates scanning large documents.
• If more than one CSS file is used, it is separated by component rather than page because the page is reorganized and the component is only moved

Editor configuration
Set up your editor according to the following configuration to avoid common code inconsistencies and differences:

• Use two spaces instead of tabs (Soft-tab is a space for tab characters).
• When you save the file, remove the trailing white space character.
• Set the file encoding to UTF-8.
• Add a blank line at the end of the file
  

Note Link:http://www.w3cfuns.com/blog-3629-5398230.html