Other specifications:

HTML specification

Media file specification

Javascript code

NodeJs specification

Vue project specification

CSS refers to Cascading Style Sheets that define how to display HTML elements, but because CSS is inherently global, it is prone to Style overwriting and other problems as a project grows in complexity.

1. General specifications

File coding

  • To avoid garbled characters, utF-8 encoding is used to save the contents.

  • The first line of the style file sets the character set to UTF-8

@charset 'UTF-8'; /* Note that the character set specification should be in the first line */Copy the code

The indentation specification

Always use two Spaces for indentation

2. Initialize specifications

Different browser vendors have different initial styles. To eliminate differences in HTML text rendering between different browsers, we often introduce some initial styles, such as normalize.css and reset.css. When introducing these styles, we need to pay attention to the following situations:

  • Do style initialization when building from scratch without using a UI framework. Introduce it at the beginning of the project, not in the middle of development, to avoid unpredictable style conflicts.

  • Do not use the UI framework, but use some plug-ins often have their own style, such as rich text plug-ins, in the middle of the development of the initialization style may lead to style confusion, so do not recommend a wide range of initialization, just a simple initialization.

* {
  padding: 0;
  margin: 0;
}
Copy the code
  • The UI framework has been used

    When you know you need to use a UI framework,Do not use third-party initialization stylesSince UI frameworks tend to come with their own initialization, both before and during the project, adding them to the UI framework can be counterproductive.

3. code specification

Naming conventions

Use a unique ID as a Javascript hook, and avoid creating a class with no style information

Code style.

  • The expanded format is used uniformly, and compact format is not recommended

    /* Expand the format */
.test {
  color: red;
  font-size: 12px;
}
Copy the code
    /* Compact format */
.test {
  color: red;
  font-size: 12px;
}
Copy the code

  • Unify two Spaces for indentation

  • Attribute declaration ends with a semicolon

  • A space between the selector and the open parenthesis, and a space after the property colon

    Recommend * / / *
.test {
  color: red;
  font-size: 12px;
}
Copy the code
    /* not recommended */
.test {
  color: red;
  font-size: 12px;
}
Copy the code

  • Do not specify units for 0

  • Color values and attribute values hexadecimal values should be abbreviated if possible

    /* recommend */.test {color:#fff;
}
Copy the code
    /* not recommended */.test {color:#ffffff;
}
Copy the code

  • quoting

    Use single quotes for URLS (), property selectors, and property values.

  • Remove the floating

    When an element needs to be raised to contain internal floating elements, clearfix is done by setting clear on the pseudo-class or by triggering the BFC. Try not to add empty labels.

    The BFC can be triggered in many ways, including:

    • Float the none
    • The position of the static
    • Overflow is not visible

The font specification

  • Do not use commercial websitesfont-faceThe introduction ofMicrosoft jas blackFont to avoid infringement (including picture content)
  • The font size of Chinese content to be displayed on Windows platform should not be smaller than12px
Microsoft Yahei font can be used on websites in three forms: 1, 【 infringement 】 the use of Microsoft yahei font, such as website header figure 2, [security] website CSS with font-family statement website using Microsoft Yahei font, such as the title and body of the article 3, 【 infringement 】 website through font face reference Microsoft Yahei, this way is not commonCopy the code

Selector specification

When strictly following the Block Element Modifier (BEM), it is recommended to use only class selectors, but BEM writing is cumbersome, so the following recommendations

  • Disable the universal selector *
  • Do not use tag selectors without concrete semantic definitions

Attribute order

The sequence of CSS attributes is a part of the good coding style of CSS, which is helpful to improve the readability of the code, facilitate the discovery of code problems, and facilitate team cooperation. However, in the project, it was found that some students were more random in writing the sequence of attributes, and they wrote one attribute when they thought of it.

It is recommended to write in the following order

  1. Position properties (Position, display, float, left, right)
  2. Size attributes (Width, height, padding, margin, border)
  3. Font properties (color, font, text-align)
  4. Other properties (Background, Cursor, Outline)

The goal is to become clear about the effect of the target element as you browse through the code.

.test {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-size: 12px;
  color: # 333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
Copy the code

4. Comment specifications

Single-line comments

Comments start with /* and end with */. Comments cannot be nested, and there is a space before and after the comment content.

/* Recommended single-line comments */
Copy the code
/* Deprecated single-line comments */
Copy the code

Note: Double-slash comments can also be used in preprocessing languages such as Sass and less, but the content of the comments does not appear in the CSS file after compilation, so it is recommended to use them all/ * * /The comments.

Module annotation

Sometimes we need to describe the functionality of a module (a block of code), and we want to distinguish it from other code.

Comments start with /* and end with */, followed by a space, with a description on the first line and a dividing line on the last line.

/ * recommended module notes -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
Copy the code
/ * not recommended module comments -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
Copy the code

*File information comment

If you need to describe the functions of a file, you are advised to write the following comments at the beginning of the file (under the character set description), including the file description, creator, and creation time.

@charset "UTF-8";
/** * @desc file function description, convenient for others to quickly understand * @author * @date creation time */
Copy the code

5. Coverage specifications

  • As far as possible,To use less importent
  • Vue single-file components use CSS, LESS, and SASSscoped
  • There needs to be one per page/componentGlobally uniqueThe identity ID /class of the, which is required for all styles that fall under it
  • Avoid global changes to existing styles, must be specific to the page (via weights)
  • Disable full matching*Selectors (except for special cases, such as initialization)

Vue single file component modification style not in effect can be used/deep/ 或 >>>

6. Media inquiries

For internal management system, business use ThinkPad notebook, the screen resolution is 1366*768. The Resolution Test browser extension is recommended for browser window size debugging.

Download address: www.cnplugins.com/devtool/res…

Common sizes are as follows

The size of the describe
P 1366 px. Large screen large desktop display
P 1200 px. Medium screen desktop monitor
P 992 px. Medium screen desktop monitor
P 768 px. Small screen tablet
<768px Super small screen phone

Give priority to PC

By default, the layout is based on the maximum size, and gradually changes to the mobile layout when the size is reduced

body { background: gray; } @media screen and (max-width: 1366px) { body { background: red; } } @media screen and (max-width: 1200px) { body { background: yellow; } } @media screen and (max-width: 920px) { body { background: green; } } @media screen and (max-width: 768px) { body { background: black; }}Copy the code

Priority mobile terminal

By default, the layout is based on the minimum size. When the size is enlarged, the layout gradually changes to the PC

body { background: gray; } @media (min-width: 768px) { body { background: red; } } @media (min-width: 920px) { body { background: green; } } @media (min-width: 1200px) { body { background: yellow; } } @media (min-width: 1366px) { body { background: red; }}Copy the code

If you need to adapt the print style, use @media Print

@media print {
  body {
    background: #fff;}}Copy the code

7. Unit specifications

There are two types of CSS units: absolute units and relative units.

  • Common absolute unit

    • Px: pixel (a dot on a computer screen)
    • Cm: cm
    • In:”
    • Pt: pounds (1 pt equals 1/72 of an inch)

  • Common relative unit

    • % : percentage of parent elements
    • Vw: Viewport width percentage
    • Vh: percentage of viewport height
    • Em: multiple of the current font
    • Rem: font multiple of the root element
    • *RPX: wechat small program, the specified screen width of 750rpx

There are three commonly used units: PX, % and REM. It is recommended to use PX unit on PC and REM on mobile. If you need to control the size, use PX

Note: If you need to calculate values in different units, you can use the CSS3 method calc()_

8. Compatibility specifications

Use of private attributes

Depending on the browser vendor, some styles require prefixes to take effect. The following are common browser cores and prefixes

The browser The kernel The prefix
Firefox Gecko -moz-
Chrome WebKit -webkit-
IE Trident -ms-
Safari WebKit -webkit-
Opera Presto -o-
Well-known Browsers in China WebKit -webkit-
Common Mobile Browsers WebKit -webkit-

The CSS3 browser private prefix precedes the standard prefix

.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
Copy the code

Note: In a WebPack environment, you can use postCSs-loader to automatically add private prefix _