What are the specifications for front-end monolithic coding?

This time I will bring you what are the specifications for front-end monomer coding, and what are the precautions for using front-end monomer coding specifications. Here are practical cases, let’s take a look.

Whether it is front-end or back-end code, coding standards are particularly important, especially in large projects. Standardizing the code, format, and requirements at the beginning will reduce a lot of workload. Conducive to the later maintenance of the code.

##1## Common - Writing Standards Use tab for indentation, set tab to 4 spaces##910## HTML-Writing specification Attributes: 12 HTML-Writing Normative Encoding 1 : 13Encoding 2:## CSS-writing specification The path in the url() function is not quoted. Such as background: url(bg.png);24 CSS-writing specification When the length is 0, the unit must be omitted. Such as padding: 0 5px##252627281.font-family Click "Western font in front, Chinese font in back", "Good effect (high quality/more efficient)" The fonts that meet the needs) are written first, and the fonts with average effects are written in the order of "after". Finally, a general font family (serif / sans-serif) must be specified; Font size: Naming: , and function names must be named in camel case; ## Sanyuan For conditional judgment (shortcut method of if), use the ternary operator to assign or return statements to avoid using them in complex situations. 45 JS-Program Smoothness String Use single quotes (') uniformly and do not use double quotes ("), which is very beneficial when creating HTML strings: such as ##46##50 JS-logical correctness Whether the query results are sorted. 51 JS-logical correctness Query area The total number of entries should be the total number of all data currently queried. Instead of the number of displayed items on the current page##52

Front-end single coding specification table

No	## Category	Verification content
	##page design	The list title is displayed in the center.
2	Page design	Query data area data display Style: 1. Indefinite length Chinese, indefinite length English, indefinite length Chinese and English, indefinite length English numerals on the left 2. Fixed length, fixed value data Center, date, time, serial number in the center 3. Amount: right
3	Common-writing standardization	Whether each file header has correct comments
4	Common-writing standardization	Whether each function has correct comments
5	Common-writing standardization	Each configuration filewhether the relevant content has comments
6	Common-writing standardization	Each logical block Are there comments
7	Common-writing norm	Are there any unused variables and references?
##8
## HTML -Writing specification	Tag 1:	1. Tag names must use lowercase letters, such as ; 2. For tags that do not need to be self-closing, self-closing is not allowed, such as input, br, img, hr, etc.; 3. For closing tags specified in HTML5, no self-closing is allowed. Allows closing tags to be omitted.
HTML-Writing Normative	Tag 2 :	1 The use of tags must comply with tag nesting rules. For example, p must not be placed in p, and tbody must be placed in table. 2. The use of HTML tags should follow the semantics of the tags. Common tag semantics p - paragraph h1,h2,h3,h4,h5,h6 - hierarchical title strong,em - emphasis ins - insert del - delete abbr - abbreviation code - code identification cite – cite the title of the source work q – cite blockquote - a paragraph or long quote ul - unordered list ol - ordered list dl,dt, dd - Definition form
##11		1. Attribute names must use lowercase letters; 2. Attribute values ​​must be surrounded by double quotes; 3. It is recommended that custom attributes be prefixed with xxx- and data- is recommended, such as .
		1. Use HTML5 doctype to enable standard mode. It is recommended to use uppercase DOCTYPE. 2. The page must contain the title tag to declare the title. 3.title must be a direct child element of head and immediately after the charset declaration. Example
## HTML-writing standardization		1. Ensure that the favicon is accessible, (place the favicon.ico file in the root directory, use link Specify favicon) such as; 2. If the project is mobile or responsive layout , the viewport of the page must be specified.
14	HTML-writing standardization	Introduction: 1. When introducing CSS, you must specify rel="stylesheet", such as ; 2. Import There is no need to specify the type attribute when using CSS and JavaScript (there is a default value); 3. Introduce all CSS resources needed for the page in the head. JavaScript should be placed at the end of the page, or loaded asynchronously. (Placing the script in the middle of the page will block the rendering of the page).
15	HTML-Writing Standards	Picture: 1. Prohibit the src value of img from being empty. Lazy loading images should also add the default src (an empty src will cause the page to be reloaded); Add unnecessary title attribute, (excess title affects Picture viewing experience, and increased page size); 3. Add alt attributes to important pictures; 4. If you need to download Images are implemented using img tags, and images without download requirements are implemented using CSS background images.
16	HTML-Writing Standards	Form: 1. A control with a text title must use the label tag to associate it with its title; 2. When using the button element, the type attribute value must be specified; 3. The buttons responsible for the main functions should be placed first in the DOM (recommended, subject to design).
17	HTML-Writing Standards	Video and Audio: 1. Prioritize using the audio and video tags to define audio and video elements in browsers that support HTML5; 2. Only enable audio when necessary Automatic playback of videos; 3. Provide a description inside the object tag indicating that the browser does not support the tag, such as .
18	CSS-Writing Normative	Style Line The length of each line must not exceed 120 characters unless the line is indivisible.
19	CSS-writing specification	Naming: 1.class and id must be in all lowercase letters, and words are separated by - (hash); 2.class and id must represent the corresponding module or The content or function of the component must not be named with style information. Words such as left, right, center, red, black, etc. appear alone in the name; 3.class must be added with the corresponding prefix (avoid Global pollution), such as g-represents global style, m-represents module style, ui-represents component style, etc. The details are subject to project regulations; 4. A single style is not allowed to appear! important; 5. Class is not allowed. It is only used to let JavaScript select certain elements and create a class without style information (using id); 6. Element The id must ensure that the page is unique; 7. Same page, different tags, avoid using the same name and id (the same tag can be used).
20	CSS-Writing Standards	When a When a rule contains multiple selectors, each selector declaration must be on its own line.
21	CSS-Writing Standards	# #Values ​​in the attribute selector must be surrounded by double quotes. Such as input[name="acd"] {......}
22	CSS-Writing Standardization	When the value is a decimal between 0 - 1, the 0 in the integer part is omitted. Such as opacity: .8
23
CSS-writing specification	Style code should be saved independently in a file with the suffix .css. Interline styles are not allowed except under special circumstances.
CSS-writing specification	RGB color Value must use hexadecimal notation form #rrggbb. rgb() is not allowed.
CSS-writing specification	Color:	1. RGB color values ​​must use hexadecimal notation #aabbcc, rgb() is not allowed; 2. When color values ​​can be abbreviated, they must Use abbreviations; such as #fff,#000 3. Named color values ​​are not allowed for color values; such as red green and other uncertain values 4. Color Values ​​all use lowercase English letters.
CSS-Writing Standardization	Font 1 :	1. The font family name in the font-family attribute should use the English Family Name of the font. If there are spaces, they must be placed in quotation marks. The use of Chinese characters is strictly prohibited. Example font-family: "Microsoft YaHei"; Font Operating system Family Name 宋体(中易宋体) Windows SimSun Black body (Zhongyi Hei body) Windows SimHei Microsoft YaHei Microsoft YaHei ##Microsoft JhengHei华文黑体                                                                                                                                                                                               using using using using using   using   using   using ‐ ‐                         –                                                          文 Quan Yi Micro Hei Linux  WenQuanYi Micro Hei ##29 CSS-writing standardization
Font 2:	Example font-family: Arial, sans-serif;	30 ## CSS-writing specification
1. Chinese content that needs to be displayed on the Windows platform, its font size should be no less than 12px;	2. Chinese content that needs to be displayed on the Windows platform , do not use font-style other than normal.	31 JS-Writing Standardization
Common naming: camel case naming thisIsAnApple, Pascal naming thisIsAnApple, underline naming this_is_an_apple, and underscore naming this-is-an-apple	1. Method /Attribute names, variable names, parameter names, namespace	2. Class names, enumeration names, constructors , Pascal naming must be used; 3. Constant names and enumeration attributes: all uppercase underline nomenclature must be used, such as IS_DEBUG_ENABLED; 4 .Private (protected) members (properties, functions, etc.): must start with underscore _; 5. Boolean type should start with is, has, etc. to indicate its type; 6. Naming also requires attention to semantics. For example, variable names should use nouns, function names should use verb-object phrases (getAccListData), and class names should use nouns.
32	JS-Writing Standards	JavaScript program It should be saved independently in a file with a .js suffix.
33	JS-Writing Standards	Avoid every Line exceeds 80 characters.
34	JS-Writing Standards	Try to reduce it as much as possible When using global variables, do not let local variables overwrite global variables.
35	JS-writing specification	can be used In the case of a common function, whether the common function is used.
36	JS-Write normative	statements: 1. Each line contains at most one statement, put; (semicolon) at the end of each simple statement; 2.return statement Do not use ( ) (brackets) to enclose the return value in a return statement with a return value. If an expression is returned, the expression should be on the same line as the return keyword to avoid accidentally adding a semicolon; 3. Avoid using the continue statement, which can easily make the logic process of the program obscure. Difficult to understand; 4.eval is the most easily abused method in JavaScript, avoid using it.
37	JS-Writing Normative	ES5 syntax The code must be wrapped into an IIFE (Immediately-Invoked Function Expression) to create an independent and isolated definition domain to prevent the global namespace from being polluted.
38	JS-Writing Normative	in the code Add js strict mode 'use strict'
##39	JS-writing standardization	Variable declaration: Use var or let to declare variables. If you do not specify a variable, it will be implicitly declared as a global variable, which will make it difficult to control the variable.
40	JS-Program Smoothness	Wisely Using true and false judgment, if(a == true) is different from if(a). This judgment will convert it into true or false through special operations. The following expressions all return false: false, 0, undefined, null, NaN, (empty string).
41	JS-Program Smoothness	Avoid creating functions in loops. Adding functions to simple loop statements can easily form closures and cause hidden dangers.
42	JS-program smoothness	Avoid When declaring a function within a statement block, a syntax error will be reported in strict mode.
43	JS-Program Smoothness	Using arrays and object literals instead of arrays and object constructors. The array constructor makes it easy to make mistakes with its arguments.
44	JS-Program Smoothness
		var msg = 'This is some HTML '.
JS-Program Smoothness	Do not use redundant programs. The following examples are used as reference:	・There are unused subroutines ・Repeated initialization ・Define unused variables
##47	JS-logical correctness	No strange logic (empty functions, unprocessed branches, etc.)
48	JS-Logical correctness	The string length of the text input box is limited based on two points: 1. Whether it is required by the business; 2. Whether the database field length meets the requirements
49	JS-logical correctness	After the query is completed, query The conditions should remain in the corresponding input boxes
JS-logical correctness	The query condition input box should remove the leading and trailing spaces before querying

# I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The solution to the problem that the text in the Safari browser select drop-down list is too long and does not wrap

##HTML and CCS Combine

The above is the detailed content of What are the specifications for front-end monolithic coding?. For more information, please follow other related articles on the PHP Chinese website!