Web Front end Encoding specification

General specification
File encoding
All files are UTF-8 encoded with no BOM.

Indent in
Use 4 spaces to indent.
The Tab may be different in length under different operating systems, and spaces are used in order for code to indent consistently in any case.
In all IDE tools, you can set 1 tab keys to 4 spaces, so you can tap a tab key to output 4 spaces.

Comments
Write notes for easy maintenance.
Note there is one space on each side of the content.

Omit protocol Header
Omit URL Protocol Header declarations (http:, https:), such as images, media files, style sheets, and scripts, so that both HTTP and HTTPS are compatible. If not, the URLs for both declarations are not omitted.

<! DOCTYPE html>

Project name, directory name, and file name
Project name, HTML file name, Css/sass file name, JS file name, all in lowercase, multiple words separated by an underscore.


HTML specification
Document Declaration
Use the HTML5 document declaration. The "DOCTYPE" case is legal, but it is recommended to be capitalized, so it looks more professional.
<! DOCTYPE html>

Uppercase and lowercase
All element and attribute names are lowercase.

Specify the lang attribute for the root element
Setting the correct language for your document will help the speech synthesis tool determine the pronunciation it should use, helping the translation tool determine the rules it should follow when translating.
"EN" stands for English; "ZH-CN" stands for Simplified Chinese.

Character encoding
There is no doubt that UTF-8 encoding is used.
Using UTF-8 encoding, you do not need to use similar &mdash; , &rdquo; and & #x263a; and other entity references.
The explicit declaration of character encoding ensures that the browser can quickly and easily determine how the page content is rendered.
The "UTF-8" case is legal, but it is recommended to capitalize.

Property
Attribute values use double quotation marks
Property values regardless of whether you use double or single quotes, the browser resolves to double quotation marks, so if you use single quotation marks, the attribute values will have double quotes.

Boolean attribute is not assigned value

Attribute Order
Attributes should be arranged in the order given below to ensure readability of the code:
(1) class
(2) ID
(3) Name
(4) data-*
(5) SRC, for, type, href, value, Max-length, max, Min, pattern
(6) Placeholser, title, alt
(7) aria-*, role
(8) required, ReadOnly, disabled

Enable IE Edge mode
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.
<! DOCTYPE html>

Typesetting
Nested elements should be indented

Try to avoid extra parent elements

Do not add a slash at the end of a self-closing element

Do not omit the optional end tag

There is no space at the end of the line

ID and Class
Usage Scenarios for ID and class
The ID is used for unique, specific elements in the page.
The elements used for layout are in class, whether they are unique in the page or not.

ID and class naming
The name of the ID and class are lowercase, and multiple words are concatenated (not underlined).
The name reflects the function.

JavaScript Generate tags
Generating tags in JavaScript files makes content harder to find, harder to edit, and less performance. This situation should be avoided as much as possible.

structure, style, behavior separation
Make sure that the structure (HTML), Style (CSS), behavior (JS) are separated, that is, to refer to the CSS files and JS files in an externally introduced way, avoiding inline and inline CSS, JS code.
The introduction of CSS files and JS files does not require specifying the type attribute, because Text/css and text/javascript are their default values respectively.
The JS file should be placed at the end of the page.

Provide meta-information about the page
<! DOCTYPE html>

Using HTML5 New Semantic tags

CSS specification
Single row per selector

Each declaration is exclusive of one row
This is to get a more accurate error report. 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.

Add a space before the left curly brace of the Declaration block

The closing curly brace of a declaration block should be exclusive of one row

Declaration statement: Should insert a space after

Declaration statement ends 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.

Comma-separated property value, followed by a space after the comma
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).
#div {    Background-color:rgba (0,0,0,.5);    box-shadow:0 1px 2px #ccc, inset 0 1px 0 #fff;}

Omit 0 in front of decimals less than 1

Hexadecimal values All lowercase

Use a shorthand hexadecimal value

To add double quotes to 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

Attribute Order
The related attribute declarations should be grouped into groups and arranged in the following order:
(1) Positioning
(2) Box model box models
(3) Typographic typesetting
(4) Visual appearance
. declaration-order {/    * positioning */    Position:absolute;    top:0;    right:0;    bottom:0;    left:0;    z-index:100;    /* Box-model */    Display:block;    Float:right;    width:100px;    height:100px;    /* Typography */    font:normal 13px "Helvetica Neue", Sans-serif;    line-height:1.5;    Color: #333;    Text-align:center;    /* Visual *    /background-color: #f5f5f5;    border:1px solid #e5e5e5;    border-radius:3px;    /* Misc */    opacity:1;}

Place media queries near relevant rules
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.

When using a property with a specific vendor prefix, the value of the property is aligned vertically
. selector {  -webkit-box-shadow:0 1px 2px rgba (0,0,0,.15);          box-shadow:0 1px 2px Rgba (0,0,0,.15);}

Do not use @import

The performance of the selector
(1) Use Classe instead of common element tags to optimize rendering performance.
(2) Avoid using some property selectors in frequently occurring components (for example, [class^= ...]). Browser performance is affected by these conditions.
(3) Reduce the length of the selector, each combination selector selector entries should be as far as possible to control within 3.

Code Organization
(1) Organize the code in units of components.
(2) Develop a consistent annotation hierarchy.
(3) Use consistent whitespace to split blocks of code, which gives you an advantage when viewing large documents.


JavaScript specification
Nothing is better than this: Https://github.com/airbnb/JavaScript

Miscellaneous
Guaranteed access to Favicon
When Favicon is not specified, most browsers request Favicon.ico under the Web Server root directory. To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods:
(1) Place the Favicon.ico file in the Web Server root directory.
(2) Use link to specify Favicon:<link rel= "shortcut icon" href= "Path/faviconname.ico" >


Web Front end Encoding specification