The CSS specification

  • Encoding setting: UTF-8 encoding
  • Indent: Use 2 Spaces for an indent level
  • Value and unit: When the attribute value or color parameter is a number between 0 and 1, the 0 before the decimal point is omitted. When the length value is 0, the unit is omitted. The hexadecimal color attribute value is lowercase and as short as possible.
  • Instead of border:0, write border: None
  • In addition to resetting browser default styles, do not add CSS styles directly to HTML tags.
  • The hierarchy (Z-index) must be clear, the page popup and bubble are the highest (the highest is 999), different popup bubbles can be adjusted between three digits; Ordinary blocks are multiples of 10 within 10-90; Block expansion, popup for the current parent level of the one bit increase.
  • The selector should be as short as possible on the basis of meeting the function to reduce selector nesting and query consumption. But be sure to avoid overwriting global style Settings.
/* Sidebar style */. Sidebar {width: 1rem;float: left;
    border: none;
    height: .5rem;
}

.sidebar li, 
.menu-title {
    padding: 0 .2rem;
    font-size: .32rem;
    color: #1cc7b9;
    background: #fff;
}
Copy the code

CSS naming conventions:

  • All lowercase letters and underscores are used. Uppercase letters and underscores are not allowed.
  • Rule naming should avoid using Chinese pinyin, do not allow naming by 1, 2, 3 and other serial numbers, and should not contain the color (red/blue), positioning (left/right) and other information related to the specific display effect. You should name the result with meaning, not style.
  • Try not to abbreviate, unless the words are obvious at first sight.
  • Ids should be used as needed, not abused. Ids are used to identify a parent container area of a module or page, and the name must be unique. Do not create new ids at random
  • Avoid the same name of class and ID
  • As far as possible to improve the reuse of code modules, style as far as possible in combination

Common names (remember and look up English words) : Page, Wrap, layout, Header (head), Footer (foot, FT), Content (Cont), Menu, nav, main, submain, sidebar(side), LOGO, banner, Title (tit), P Opo (POP), icon, note, BTN, TXT, Block, Window (Win), tips, etc., if not commonly used, you can use translation tools to translate the English name.

CSS writing sequence

  • 1. Content attribute (first, if any)

  • Position/top/right/bottom/left/z-index/display/float /…

  • Width/height/padding/margin/border/overflow /…

  • Font/line-height/text-align/word-wrap

  • Color/background/list-style/transform/animation/transition /…

  • If CSS3 attributes are used and it is necessary to add browser prefixes, they are added in the order of -webkit- / -moz- / -ms- / -o- / STD, with the standard attributes written last.

  • Links should be added in strict order: A :link -> a:visited -> a:hover -> a:active

Specification for space lines:

  • Add a space before the left curly brace {in the rule declaration block.
  • Leave a space on each side of the +, >, ~ selectors
  • Enclose the style attribute with a colon: followed by a space and no space.
  • The close brace} of the rule declaration block monopolizes a line.
  • Each rule declaration is separated by a blank line.
  • All outermost quotes use double quotes “.
  • If multiple selectors share a style set, multiple selectors must be written as multiple lines.

Code comments

Code comments, written before the section requiring comments

Single-line comments

There must be a space between the asterisk and the content.

/* Single-line comments: there must be a space */ between the asterisk and the contentCopy the code

Multiline comment

Asterisks must be aligned in one column, and there must be a space between the asterisk and the content.

/** * multi-line comments: asterisks must be aligned in one column, and there must be a space between the asterisk and the content. * /Copy the code

Rule declaration block comments

Use a // comment, followed by a space, on a single line, before the part that needs to be commented

.foo{ border: 0; // Comment a separate line: background-color:#fff;
}
Copy the code