General convention

General Conventions

Code Organization

• Organize code segments in units of components;
• Develop consistent comment specifications;
• Component blocks and sub-component blocks and declaration blocks are separated by a blank line , between sub-component blocks #Three blank linesSeparated;
If multiple CSS files are used, split them into components rather than pages, because the page will be reorganized and the components will only be moved;

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}

Use semantic, universal naming;
Use hyphens - as ID and Class name delimiters, do not use camel case nomenclature and underline;
Avoid too many selector nesting levels, try to be less than 3 levels;
Avoid overlapping use of selectors with Class and ID;

performance considerations, avoid using element selectors overlapping Class and ID when unnecessary.

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}

When selectors are grouped, keep independent selectors occupying one line;
The left bracket of the declaration block
• { Add a space before;
The right bracket of the declaration block
• } should be on a separate line;
should add a space after
• : in the declaration statement;
The declaration statement should end with a semicolon
• ;;
Generally, attribute values ​​separated by commas, a space should be added after each comma;
• rgb(), rgba(), hsl(), hsla() or rect() brackets Values ​​within, separated by commas, but do not add a space after the comma;
For attribute values ​​or color parameters, omit the 0 in front of decimals less than 1 (for example,
• .5 instead of 0.5;-.5px instead of -0.5px);
Hexadecimal values ​​should be all lowercase and abbreviated as much as possible, for example,
• #fff instead of #ffffff;
Avoid specifying units for 0 values, for example, use
• margin: 0; instead of margin: 0px;；

/*  Not recommended  */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Recommended */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Because positioning can remove elements from the normal document flow and can also override box model-related styles, it ranks first. The box model determines the size and location of components and therefore comes second.

Other properties only affect the inside of the component (inside) or do not affect the first two groups of properties, so they are ranked behind.

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

Use quotation marks

url(), attribute selector, and attribute value using double quotation marks. Reference Is quoting the value of url() really necessary?

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

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

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

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

.selector[type="text"] {

}

Position of media query

Place the media query as close to the relevant rules as possible . Don't package them in a single style file or place them at the bottom of the document. If you separate them, they will only be forgotten by everyone in the future.

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

Don’t use @import

Compared with <link>, @import It is much slower, not only increasing the number of additional requests, but also causing unpredictable problems.

Alternative approach:

• Use multiple elements;
• Compile multiple CSS files into one file through a CSS preprocessor like Sass or Less;
• Other CSS file merging tools;

Reference don't use @import;

Style order of links:

a: link -> a:visited -> a:hover -> a:active (LoVeHAte)

No need to add browser vendor prefix

Use Autoprefixer Automatically add the browser manufacturer prefix. There is no need to add the browser prefix when writing CSS, just use standard CSS to write.

Autoprefixer adds the browser vendor prefix to the corresponding CSS code according to the compatibility requirements through Can I use.