Links to other specifications

JavaScript specification and naming

RESTful Interface specifications

Git Usage Specification

1. Naming style

1.1 Naming Prefixes

Use prefixed namespaces to prevent naming conflicts.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */
Copy the code

1.2 ID and class name delimiters

A hyphen is used in the selector to improve readability.

/* bad There is no separator between demo and image */
.demoimage {}
 
/* Bad uses the underscore */
.error_status {}
 
/* good */
#video-id {}
.ads-sample {}
Copy the code

2. Values and units

2.1 units

If the value is 0, the unit is not added.

margin: 0;
padding: 0;
Copy the code

If the value is between -1 and 1, you don’t need to add 0.

font-size:.8em;
Copy the code

2.2 color value

Colors are unified in hexadecimal notation, and repeated letters are omitted. Rgba () is generally not allowed, except for color messages with alpha. When using RGBA (), you must leave a space after each comma.

/* bad */
color: #eebbcc;
 
/* good */
color: #ebc;
 
/* good */
box-shadow: 0 0 2px rgba(0.128.0.3);
Copy the code

Color values cannot use named colors. English characters in color values should be lowercase.

/* bad */
.success {
  color: lightgreen;
}
 
/* good */
.success {
  color: #90ee90;
}
 
/* bad */
.success {
  color: #90ee90;
  background-color: #ACA
}
 
/* good */
.success {
  color: #90ee90;
  background-color: #aca
}
Copy the code

3. Selector and properties

3.1 the selector

Do not qualify the element name before the ID or class unless necessary.

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}
Copy the code

3.2 Attribute shorthand

Use abbreviable CSS properties (such as font) to improve coding efficiency and code readability.

/* bad */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* good */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
Copy the code

4. Write in order

Write the attributes in the following order (the attributes with the browser prefix are written with their corresponding attributes) to reduce unnecessary page redrawing.

div {
  /* Locate attributes */
  display;
  visibility;
  float;
  clear;
  
  position;
  top;
  right;
  botttom;
  left;
  z-index;
  overflow;

  /* Attributes */
  width;
  min-width;
  max-width;
  height;
  min-height;
  max-height;

  margin;
  margin-top;
  margin-right;
  margin-bottom;
  margin-left;

  padding;
  padding-top;
  padding-right;
  padding-bottom;
  padding-left;
  
  border-width;
  border-top-width;
  border-right-width;
  border-bottom-width;
  border-left-width;

  border-style;
  border-top-style;
  border-right-style;
  border-bottom-style;
  border-left-style;

  border-color;
  border-top-color;
  border-right-color;
  border-bottom-color;
  border-left-color;

  outline;

  list-style;

  table-layout;
  caption-side;
  border-collapse;
  border-spacing;
  empty-cells;
  
  /* Text style, text attribute */
  font;
  font-family;
  font-size;
  line-height;
  font-weight;
  text-align;
  text-indent;
  text-transform;
  text-decoration;
  letter-spacing;
  word-spacing;
  white-space;
  vertical-align;
  color;

  background;
  background-color;
  background-image;
  background-repeat;
  background-position;

  /* Other attributes */
  opacity;

  cursor;

  content;
  quotes;
}
Copy the code

5. General

5.1 Nesting hierarchy of selectors

The nesting level of the selector should be no more than 3 levels, and the qualification of the position at the back should be as precise as possible.

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

/* good */
#username input {}
.comment .avatar {}
Copy the code

5.2 the quotation marks

Attribute selectors and attribute values are quoted in single quotes; URI values are not quoted.

/* bad */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

/* good */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}
Copy the code

5.3 Style Block Style

Delimit selectors with Spaces between {}.

/* bad has no Spaces */
#video{
  margin-top: 1em;
}

/* bad has no necessary newline */
#video
{
  margin-top: 1em;
}

/* good */
#video {
  margin-top: 1em;
}
Copy the code

5.4 Writing Style of Attribute Names

There should be a space between the attribute name and value.

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

/* good */
h3 {
  font-weight: bold;
}
Copy the code

5.5 Selector Separation

Each selector starts on a separate line.

/* bad */
a:focus.a:active {
  position: relative; top: 1px;
}

/* good */
h1.h2.h3 {
  font-weight: normal;
  line-height: 1.2;
}
Copy the code

The selectors are separated by blank lines.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}
Copy the code

5.6 Section Notes

Use comments to break CSS into sections.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}
Copy the code

5.7 the 2 d position

The 2D position starts at 0% 0%, but when there is only one value in one direction, the value in the other direction is resolved to center. To avoid confusion in understanding, values in both directions should be given.

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

/* good */
body {
  background-position: center top; /* Horizontal 50% vertical 0% */
}
Copy the code

5.8 !important

Try not to use! Important statement. Inline and! Tags are used only when styles need to be enforced and no scene overrides are allowed. Important defines styles.

It is important to note that inline is only used when the design really does not allow any other scene overlay styles! Important style.

5.9 z – index

Z-index is layered to manage the visual hierarchy of absolutely positioned elements outside the document flow.

Multiple elements of the same level, such as multiple dialogs triggered by user input, use the same Z-index or incrementing Z-index within that level.

Use 100 Z-indexes per layer to hold enough elements, and you can adjust this number if there are more elements per layer.

In a controlled environment, the z-index is specified as 999999 for the element expected to be displayed at the top level.

6. The font

6.1 Font Order

Font-family: serif, serif, serif, serif, serif, serif, serif, serif, serif, serif, serif

h1 {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB"."WenQuanYi Micro Hei"."Microsoft YaHei", sans-serif;
}
Copy the code

6.2 Font Case

Font -family in the same project should be uppercase.

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

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

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

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

6.3 the font – weight

The font-weight attribute must be described numerically. 400 equals Normal and 700 equals Bold.

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

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

7. Transformations and animations

7.1 specifies the transition – the property

Transition-property should be specified when using transition.

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

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

7.2 Add transitions and animations to properties that the browser can efficiently implement whenever possible

Where possible, four such transformations should be selected:

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
Opacity: 0.1;

Typically, translate can be used instead of left as the animation property.

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

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

8. The response type

8.1 More effective style

Try to give styles that work best on Retina devices.

8.2 Media Query

Media Query cannot be choreographed in isolation and must be defined with the associated rules.

/* bad */
/* header styles */
/* main styles */
/* footer styles */

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

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

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

/* footer styles */
@media(...). {/* footer styles */
}
Copy the code

Compatibility 9.

9.1 Attribute Prefixes

Attributes with private prefixes are arranged in ascending order, aligned by colons, with standard attributes placed last.

.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
Copy the code

10. File naming

Global style sheet: global.css
Reset the default style: reset.css
Layout style: layout.css
Text style: font. CSS

11. Id and class naming

The name is kebab-case.

When there is no nested structure

The first character represents a block, and the second character represents the element below the block level.

Example:

<div class="article">
  <button class="article-btn"></button>
</div>
 
<div class="head">
  <h1 class="head-title">title</h1>
</div>
Copy the code

When there are nested structures

The name is based directly on the hierarchy, without the use of -concatenation.