Naming conventions
Project naming
All are in lowercase. When multiple words are included, use the middle dash (-) to separate them.
Example: my project name
Directory naming
Refer to project naming rules;
When there is a plural structure, the plural naming method shall be adopted.
Examples: utils, images, modes
In vue's project, the component directory name under components uses the big hump command
Example: LeftBar,BackToTop
javaScript file naming
Refer to project naming rules;
Example: error log js,get-page-title. js
css,less file naming
Refer to project naming rules;
Example: index css,retina-sprites. css
HTML file naming
Refer to project naming rules;
Example: Avatar upload html
If Vue or React technology stack is used, name the Component
- Can intuitively feel the purpose of the current component
- All component names use the big hump naming method: initial capitalization
Example: mixchart vue
HTML specification
Syntax:
- Indent using tab (2 spaces);
- Nested nodes should be indented;
- On attributes, use double quotation marks instead of single quotation marks;
- Attribute names are all lowercase, with a dash (-) as the separator;
- Use a slash at the end of the auto close label;
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company" />
<!-- Attribute names are all lowercase, underlined(-)Do separator -->
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
Standard mode
Specify the doctype at the beginning to start the standard mode. The doctype should be capitalized.
<!DOCTYPE html> <html> ... </html>
Specified character code
Specify encoding in HTML < meta charset = "UTF-8" >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
...
</html>
IE compatibility mode
Use the meta tag to specify what version of IE the page should use to render.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
...
</html>
Semantic label
html tags can be semantic. Try to use semantic tags to avoid a page with div or p tags.
<!-- bad --> <div> <p></p> </div> <!-- good --> <header></header> <footer></footer>
External chain resource URL protocol
Omit the http / https protocol in the URL of external chain resources (pictures and other media resources) to make the URL a relative address, avoid the problem of Mixed Content and reduce the number of File Bytes.
Mixed Content: the problem caused by the mixing of http and https.
URL s of other protocols (ftp, etc.) are not omitted.
<!-- bad -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.3"></script>
<!-- good -->/* recommend */
<script src="//cdn.jsdelivr.net/npm/vue@2.5.3"></script>
<!-- bad -->
.example {
background: url(http://www.google.com/images/example);
}
<!-- good -->/* recommend */
.example {
background: url(//www.google.com/images/example);
}
Attribute order in label
- class(class is the highest reuse design and should be placed at the top)
- ID name (use ID as little as possible)
- data - \ \ * custom attribute (attribute name is all lowercase and connected with -)
- SRC (resource file)
- Placeholder Title ALT (prompt)
- Required readonly disable
CSS specification
name
- Class names are lowercase letters separated by a dash (-)
- id is named in Hump style
- The variables, functions, mixtures and placeholder s in less and scss are named in Hump style
/* class */
.element-content {
...;
}
/* id */
#myDialog {
...;
}
/* variable */
$colorBlack: #000;
/* blend */
@mixin centerBlock {
...;
}
Attribute declaration order
The writing sequence is:
- Position, top, right, Z-index, display, flaot
- Width height padding border margin background
- Text (font, line height, letter spacing, color)
- Other (animation,transition)
indent
Indent with tab (2 spaces)
.element {
border-radius: 10px;
width: 50px;
height: 50px;
}
semicolon
A semicolon is added at the end of each statement
.div{
width: 50px;
height: 50px;
}
Quotation marks
- The outermost layer uses double quotation marks uniformly
- The contents of the url should be in quotation marks
- The attribute value in the attribute selector requires quotation marks
A semicolon is added at the end of each statement
.box:after {
content: "";
background-image: url("logo.png");
}
li[data-name="single"] {
...;
}
colour
- Color hex with lowercase letters
- Try to use abbreviation for color hexadecimal
/* bad */
.element {
color: #ABCDEF;
background-color: #001122;
}
/* good */
.element {
color: #abcdef;
background-color: #012;
}
Media query
Try to keep the rules of media query close to the rules related to them. Don't put them together in a separate style file or at the bottom of the document. Doing so will only make it easier for everyone to forget them in the future
.element {
...
}
.element-avatar{
...
}
@media (min-width: 720px) {
.element {
...
}
.element-avatar {
...
}
}
Less/scss related specifications
- CSS selectors should not exceed 3 layers
- Avoid excessive nesting. LESS/SCSS nesting can not exceed 5 layers at most
- Organizational order
- @import
- Variable declaration
- Style declaration
@import "mixins/size.less";
@colorBlack: #000;
.page {
width: 960px;
margin: 0 auto;
}
Other specifications
- Remove the 0 after the decimal point, for example: RGBA (0,0,0,0.5) = > RGBA (0,0,0,. 5)
- Minimize the use of element selectors
JavaScript specification
indent
Indent with tab (2 spaces)
if (x < y) {
x += 2;
} else {
x += 1;
}
Naming conventions
- Variable naming: small hump naming
- Parameter name: naming of small hump
- Function name: small hump naming
- Method / attribute name: small hump naming
- Class name starts with uppercase
- Constants are capitalized and underlined_ connect
- Underline private properties, variables, and methods_ start
- Boolean type should start with is, has, etc
- Variables should use nouns and try to conform to the semantics at that time
var loadingModules ;
const MAX_COUNT = 10;
function insertHTML(element, html) {}
Variable declaration
- All variable declarations in the scope of a function should mention the function header as much as possible. Try to use let and const instead of var.
- Between let and const, it is recommended to give priority to const, especially in the global environment. Variables should not be set, but constants should be set.
function doSomethingWithItems(items) {
// use one var
let value = 10,
result = value + 10,
i,
len;
for (i = 0, len = items.length; i < len; i++) {
result += 10;
}
}
Template string
If splicing is required, use template string
let str = 'world'
let string = `hello ${str}`
Space
There is no need to write spaces in the following cases:
- After the property name of the object
- Function call before parentheses
- Whether it is a function declaration or a function expression, do not leave a space before '('
- After and before array
- Operator (after and before)
Be sure to write spaces in the following cases:
- Ternary operator '?:' around
- There must be a space after the comma
- Before code block {
- Keywords before: else, while, catch, finally
- Keywords: if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
- Before the property value of the object
- for loop, a space is left after the semicolon. If there are multiple preconditions, a space is left after the comma
- Function declaration, function expression (no space before, no space after)
- Between the parameters of the function
Empty line
There must be blank lines in the following cases
- After variable declaration (when the variable is declared on the last line of the code block, there is no need for a blank line)
- Before comment (when the comment is on the first line of the code block, there is no need for a blank line)
- After code block
- Leave a blank line at the end of the file
var x = 1;
// There should be a blank line before the comment
if (x >= 1) {
var y = x + 1;
}
Quotation marks
The outermost layer uses single quotation marks uniformly, unless the string is nested.
// bad var x = "test"; // good var y = 'foo', z = '<div id="test"></div>';
brackets
The following keywords must be followed by braces (even if the content of the code block is only one line): if, else, for, while, do, switch, try, catch, finally, with.
// bad
if (condition) doSomething();
// good
if (condition) {
doSomething();
}
Object, array
- The object attribute name does not need to be quoted. For example, if the object attribute name is named with an underscore, it needs to be quoted (eslint's rules)
- Objects are written in indented form, not in one line (a single attribute can be written in one line, and a single line can be used when es6 importing methods)
- There should be no comma at the end of array and object
// good
var a = {
b: 1,
c: 2
};
undefined
Never use undefined to judge variables directly;
Use typeof and string 'undefined' to judge variables.
// bad
if (user=== undefined) {
...
}
// good
if (typeof user=== 'undefined') {
...
}
Multiple nested conditional judgments and loops (up to three levels) are not allowed
If conditional judgment can be solved by using ternary operators and logical operators, do not use conditional judgment, but remember not to write too long ternary operators.
other
- 'LF' is used for line breaks
- Reference to the context this can only use '_ this', 'that', 'self' one of them
- There should be no blank characters at the end of the line
- Empty code blocks are not allowed (comments can be written in code blocks if necessary)
Annotation specification
Single line comment (/ /)
- Single line: / / (double slash) leave a space between the comment text
- Add a comment after the code: / / (double slash) leave a space between the code and / / (double slash) leave a space between the comment text.
- Comment Code: / / (double slash) leave a space between the code.
Example:
// A function is called; (1) On a separate line setTitle(); var maxCount = 10; // Set the maximum number; (2) Comment after code // setData(); // (3) Comment code
Multiline comment (/ comment description /)
- If the start (/ * and end (* /) are on one line, it is recommended to use a single line comment
- If there are at least three lines of comments, the first line is / *, the last line is * /, the other lines start with *, and the comment text and * reserve a space.
Example:
/* * The setTitle() function will be called after the code is executed here * setTitle(): Set the value of title */ setTitle();
Function (method) annotation
Function (method) annotation is also a kind of multi line annotation, but it contains special annotation requirements. Please refer to javadoc (Baidu Encyclopedia)
/** * Function description * @keyword */
Example:
/**
* Judge whether the object is empty
* @param obj
* @returns {boolean}
*/
export const isNotEmpty = (obj) => {
let flag = true;
if (obj === "" || obj == null || obj === undefined || obj === "undefined") {
flag = false;
}
return flag;
};