CSS coding specification

1 Preface

2 code style

2.1 documents

2.2 indent

2.3 spaces

2.4 line length

2.5 selector

2.6 properties

3 general

3.1 selector

3.2 attribute abbreviations

3.3 attribute writing order

3.4 clear float

3.5 !important

3.6 z-index

4 values and units

4.1 text

4.2 values

4.3 url()

4.4 length

4.5 color

4.6 2D position

5 text arrangement

5.1 font family

5.2 font size

5.3 font style

5.4 word weight

5.5 row height

6 transformation and animation

7 responsive

8 compatibility

8.1 attribute prefix

8.2 Hack

8.3 Expression

1 Preface
As a description language of web page style, CSS has been widely used. The goal of this document is to make CSS code style consistent, easy to understand and maintain.

Although this document is designed for CSS, when using various CSS precompilers (such as less, sass, stylus, etc.), the applicable parts should also follow the conventions of this document as far as possible.

2 code style
2.1 documents
[suggestion] CSS files are encoded in UTF-8 without BOM.
Explanation:

UTF-8 coding has wider adaptability. BOM may cause unnecessary interference when using programs or tools to process files.

2.2 indent
[mandatory] use 4 spaces as an indent level, and 2 spaces or tab characters are not allowed.
Example:

.selector {
    margin: 0;
    padding: 0;
}

2.3 spaces
[mandatory] a space must be included between the selector and {.
Example:

.selector {
}

[mandatory] no space is allowed between the attribute name and: and between: and the attribute value.
Example:

margin: 0;

[mandatory] when a list type attribute value is written in a single line, it must be followed by a space.
Example:

font-family: Arial, sans-serif;

2.4 line length
[mandatory] no more than 120 characters per line, unless a single line is indivisible.
Explanation:

The common inseparable scenario is that the URL is too long.

[suggestion] for super long styles, it is recommended to group them logically at the space or after the style value.
Example:

/* Different attribute values are logically grouped */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* Attributes that can be repeated multiple times, one line at a time */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* Property values of similar functions can be based on the indentation of function calls */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

2.5 selector
[mandatory] when a rule contains multiple selectors, each selector declaration must be exclusive.
Example:

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[force] >, +, ~ selectors have one space on each side.
Example:

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

[mandatory] values in attribute selectors must be enclosed in double quotes.
Explanation:

Single quotation marks and quotation marks are not allowed.

Example:

/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female;
}

2.6 properties
[mandatory] attribute definition must start on a different line.
Example:

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }
[force] Property definition must end with a semicolon.
Example:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

3 general
3.1 selector
[mandatory] if not necessary, do not add type selectors for id and class selectors for qualification.
Explanation:

It has a certain impact on performance and maintainability.

Example:

/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}
[proposal] The nesting level of the selector shall not be greater than level 3, and the limiting conditions at the back of the position shall be as accurate as possible.
Example:

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

3.2 attribute abbreviations
[suggestion] if abbreviations can be used, try to use attribute abbreviations.
Example:

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

[suggestion] when using abbreviations such as border / margin / padding, attention should be paid to the impact of implied values on actual values. Abbreviations should be used only when it is really necessary to set values in multiple directions.
Explanation:

Abbreviations such as border / margin / padding can set the values of multiple attributes at the same time, which is easy to override the settings that do not need to be overwritten. If some directions need to inherit the values declared by others, they should be set separately.

Example:

/* centering <article class="page"> horizontally and highlight featured ones */
article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}

.featured {
    border: 1px solid #69c; /* introducing redundancy */
}

3.3 attribute writing order
[suggestion] when writing the attributes under the same rule set, they should be grouped by function and written in the order of Formatting Model > box model > size > text related > visual effect, so as to improve the readability of the code.
Explanation:

• The related attributes of the Formatting Model include: position / top / right / bottom / left/
  float / display / overflow, etc
• Box Model related attributes include: border / margin / padding / width / height, etc
• Typographic related attributes include: font / line height / text align / word wrap, etc
• Visual related properties include: background / color / transition / list style, etc

In addition, if the content attribute is included, it should be placed first.

Example:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

3.4 clear float
[suggestion] when the element needs to be raised to contain internal floating elements, clear fix by setting clear on the pseudo class or triggering BFC. Try not to add empty tags.
Explanation:

There are many ways to trigger BFC, including:

float non none
position non static
overflow non visible
If you want to use a floating method with less side effects

It should also be noted that clearfix is not required for elements that have triggered BFC.

3.5 !important
[suggestion] try not to use the! important declaration.
[suggestion] when the style needs to be specified forcibly and no scene coverage is allowed, define the style through label inline and! important.
Explanation:

It must be noted that the inline! important style is used only when the design does not allow any other scene to override the style. This scheme is usually used in applications in third-party environments. The following z-index chapter is a typical example of one of the special scenes.

3.6 z-index
[suggestion] layer the z-index to manage the visual hierarchical relationship of absolute positioning elements outside the document stream.
Explanation:

Multiple elements in the same layer, such as multiple Dialog triggered by user input, use the same z-index or increment z-index in this layer.

It is recommended that each layer contain 100 z-index es to accommodate enough elements. If there are many elements in each layer, you can adjust this value.

[suggestion] in a controllable environment, for the elements expected to be displayed on the top layer, the z-index is specified as 999999.
Explanation:

There are two controllable environments: one is its own product line environment; the other may be referenced by other product lines, but will not be referenced by external third-party products.

It is not recommended to take 2147483647, so that when its own product line is referenced by other product lines, there is room for upward adjustment in case of hierarchy coverage conflict.

[suggestion] in the third-party environment, you can specify the z-index as 2147483647 through tag inline and! important.
Explanation:

The third-party environment is completely out of control for developers. For elements in the third-party environment, this method is required to ensure that elements are not overwritten by other style definitions on their pages.

4 values and units
4.1 text
[mandatory] text content must be enclosed in double quotes.
Explanation:

The content of a text type may be in content such as selectors, attribute values, and so on.

Example:

/* good */
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: """;
}

html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: """;
}

/* bad */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: '"';
}

html[lang|=zh] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: """;
}

4.2 values
[mandatory] when the value is a decimal between 0 and 1, omit the 0 of the integer part.
Example:

/* good */
panel {
    opacity: .8;
}

/* bad */
panel {
    opacity: 0.8;
}

4.3 url()
[force] the path in the url() function is not quoted.
Example:

body {
    background: url(bg.png);
}

[suggestion] the absolute path in the url() function can omit the protocol name.
Example:

body {
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}

4.4 length
[mandatory] units must be omitted when the length is 0. (only length units can be saved)
Example:

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

4.5 color
[mandatory] RGB color values must use hexadecimal notation #rrggbb. rgb() is not allowed.
Explanation:

rgba() can be used for color information with alpha. When using rgba(), you must leave a space after each comma.

Example:

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

[mandatory] when the color value can be abbreviated, the abbreviated form must be used.
Example:

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

[mandatory] named color values are not allowed.
Example:

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

[suggestion] English characters in color values are in lowercase. If lower case is not used, it is also necessary to ensure that the case in the same item is consistent.
Example:

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}

4.6 2D position
[mandatory] both horizontal and vertical positions must be given.
Explanation:

The initial value of 2D position is 0%, but when there is only one direction, the value of the other direction will be resolved to center. In order to avoid confusion in understanding, values in both directions should be given at the same time

Example:

/* good */
body {
    background-position: center top; /* 50% 0% */
}

/* bad */
body {
    background-position: top; /* 50% 0% */
}

5 text arrangement
5.1 font family
[mandatory] the font Family Name in the font family attribute should use the English Family Name of the font. If there is a space, it must be placed in quotation marks.
Explanation:

The so-called English Family Name is a metadata of font file. The common names are as follows:

Example:

h1 {
    font-family: "Microsoft YaHei";
}

[mandatory] font family is written in the order of "Western Font first, Chinese font last", "font with good effect (high quality / better meet the demand) first, and font with average effect last". Finally, a general font family (serif / sans serif) must be specified.
Explanation:

Example:

/* Display according to platform */
.article {
    font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

[mandatory] font family is not case sensitive, but in the same project, the case of the same Family Name must be uniform.
Example:

/* good */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

/* bad */
body {
    font-family: arial, sans-serif;
}

h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

5.2 font size
[mandatory] the font size of Chinese content to be displayed on Windows platform shall not be less than 12px.
Explanation:

Due to the font rendering mechanism of Windows, the display effect of text smaller than 12px is very poor and difficult to recognize.

5.3 font style
[suggestion] do not use font style other than normal for Chinese content that needs to be displayed on Windows platform. Other platforms should also be used with caution.
Explanation:

Because the Chinese font is not implemented in the italic style, it will be fallback to obilique in all browsers (automatically fitted to italics). The display effect under small font size (especially when dot matrix font is used under small font size under Windows) is poor, resulting in reading difficulties.

5.4 word weight
[mandatory] the font weight attribute must be described numerically.
Explanation:

The word weight of CSS is divided into nine levels from 100 to 900, but at present, due to the limitation of font quality and browser, it actually supports two levels of 400 and 700, which are equivalent to the keywords normal and bold respectively.

The browser itself uses a series of heuristic rules for matching. When < 700, the Regular word weight of the font is generally matched, and when > = 700, the Bold word weight is matched.

However, existing browsers begin to support Semibold word weight matching when = 600, so the use of numerical description increases flexibility and is shorter.

Example:

/* good */
h1 {
    font-weight: 700;
}

/* bad */
h1 {
    font-weight: bold;
}

5.5 row height
[suggestion] line height should use numeric values when defining text paragraphs.
Explanation:

Set line height to a numerical value, and the browser will calculate again based on the font size set by the current element. In the combination of text paragraphs with different font sizes, it can achieve a more comfortable inter line spacing effect and avoid setting line height in each font size setting.

When line height is used to control vertical centering, it should still be set to be consistent with the height of the container.

Example:

.container {
    line-height: 1.5;
}

6 transformation and animation
[mandatory] transition property should be specified when using transition.
Example:

/* good */
.box {
    transition: color 1s, border-color 1s;
}

/* bad */
.box {
    transition: all 1s;
}

[suggestion] add transitions and animations on the properties that the browser can efficiently implement as much as possible.
Explanation:

Where possible, four transformations should be selected:

• transform: translate(npx, npx);
• transform: scale(n);
• transform: rotate(ndeg);
• opacity: 0...1;

Typically, you can use translate instead of left as an animation attribute.

Example:

/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}

7 responsive
[mandatory] Media Query cannot be arranged separately and must be defined together with relevant rules.
Example:

/* Good */
/* header styles */
@media (...) {
    /* header styles */
}

/* main styles */
@media (...) {
    /* main styles */
}

/* footer styles */
@media (...) {
    /* footer styles */
}


/* Bad */
/* header styles */
/* main styles */
/* footer styles */

@media (...) {
    /* header styles */
    /* main styles */
    /* footer styles */
}

[mandatory] if Media Query has multiple comma separated conditions, each condition should be placed on a separate line.
Example:

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}

[suggestion] try to give the style with better effect under high-resolution device (Retina).
8 compatibility
8.1 attribute prefix
[mandatory] attributes with private prefix are arranged from long to short, aligned by colon position.
Explanation:

The standard attributes are placed at the end and aligned by colon for easy reading and multi line editing in the editor.

Example:

.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

8.2 Hack
[suggestion] if hack needs to be added, consider whether it can be solved in other ways as far as possible.
Explanation:

If you can achieve the desired style through reasonable HTML structure or other CSS definitions, you should not use hack to solve the problem. Hack usually leads to an increase in maintenance costs.

[recommendation] try to use selector hack to deal with compatibility rather than attribute hack.
Explanation:

Try to use selector hack that conforms to CSS syntax to avoid the problem that some third-party libraries cannot recognize hack syntax.

Example:

/* IE 7 */
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}

/* IE 6 */
* html #header {
    margin-top: 5px;
    padding: 4px;
}

[suggestion] try to use simple attribute hack.
Example:

.box {
    _display: inline; /* fix double margin */
    float: left;
    margin-left: 20px;
}

.container {
    overflow: hidden;
    *zoom: 1; /* triggering hasLayout */
}

8.3 Expression
[mandatory] Expression is prohibited.