General CSS coding specifications and general css Coding

General CSS coding specifications and general css Coding

General CSS coding specifications

 

In summary, some front-end encoding specifications are provided first, and most of them are common. It should be the mainstream method.

1 Preface

The goal of this document is to make CSS Code consistent in the style of the team, which is easy to understand and be maintained.

Although this document is designed for CSS, when using a variety of CSS pre-compilers (such as less, sass, stylus, etc.), the applicable part should also follow the conventions in this document as much as possible.

 

2. CSS naming

• Keep the class name in lower case. You can use a short dash (do not use the underline or camelCase)
• Short dashes should be used as natural interruptions of related classes. (For example,. btn and. btn-blue ).
• Avoid overusing abbreviations .. Btn can describe the button well, But. t cannot represent any element.
• The class name should be as short as possible and should be as clear as possible.
• Use meaningful names; Use structured or target-specific names instead of abstract names.
• When naming globally, you need to add a specific prefix such as 'zk-wrapp'
• During local naming, the module content or the nearest parent node can be used as the prefix.

 

3. CSS infrastructure

• Encoding format: the file encoding format is 'utf-8'. the character set of the document is stated at the top of the CSS file.

  @charset "utf-8";

4. Encoding Style

• Indent mode: Use4Space is used as an indent level and cannot be used2Space ortabCharacter.

• Space

  • SelectorAnd{Must contain spaces.
  • Attribute nameAnd:Spaces are not allowed between them,:AndAttribute ValueMust contain spaces.
  • List attribute valuesWhen writing in a single row,,Must be followed by a space.

• Selector

  • If not necessary, do notid,classSelect a selector to add a type selector.
  • The nesting level of the selector should not be greater3Level, the conditions for determining the position to the back should be as accurate as possible
  • >,+,~Each side of the selector contains a space.

• Attribute

  • The attribute definition must start with another line.
  • The attribute must end with a semicolon after it is defined.
  • Use the attribute abbreviation whenever possible.

  • Attribute prefix. The standard attribute is placed at the end, and aligned with the colon to facilitate reading and multi-line editing in the editor.

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

• Attribute writing sequence: Location> box model> layout> appearance> others

  • Positioning location

    // Includes float, display, overflow ...... Position: absolute; top: 50px; left: 0; overflow-x: hidden;

  • Box model

    border: 1px solid #000margin: 20px;padding: 15px;width: 240px;height: 160px;  

  • Typographic Layout

    font-size: 16px;line-height: 32px;text-align: left;word-wrap: break-word

  • Visual appearance

    background: #fff url(images/logo.png) no-repeat;color: #000;

• Clear floating
  When the child content float changes, the parent label must clear the float.clear.clearfix. Try not to add null labels. [See]

  // css .clearfix::after {    clear: both;    content: "";    display: table; }

• Color

  • The RGB color value must be in hexadecimal notation#rrggbb. Not Allowedrgb().
  • When the color value can be abbreviated, it must be abbreviated,border-color: #ccc;
  • Do not use English names for color values, suchcolor:red
  • It is best to Use lowercase characters for all color values

• Value

  • When the value is 0, the Unit can be omitted,padding: 0; margin: 0;
  • When the value is a decimal point between 0 and 10, Suchopacity: .8;

• The z-index generally takes 5 or 10 as a step (for example, 50, 60, 70) to facilitate later addition or modification.

• ! Important 'Try not to use!importantStatement.

• Font

  • font-familyThe font family name in the property should use English letters of the fontFamily Name. If there is a space, it must be placed in quotation marks.

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

    Font	Operating System	Family Name
    ()	Windows	SimSun
    Simhei (easy to simhei)	Windows	SimHei
    	Windows	Microsoft YaHei
    	Windows	Microsoft JhengHei
    文	Mac/iOS	STHeiti
    Holly black	Mac/iOS	Hiragino Sans GB
    Wenquanyi zhenghei	Linux	WenQuanYi Zen Hei
    Wenquanyi micron black	Linux	WenQuanYi Micro Hei

    // Css usage h1 {font-family: "Microsoft YaHei ";}

• Font Size

  • The font size of the Chinese content to be displayed on the Windows platform must be no less12px.

• Word weight

  • CSS has nine characters ranging from 100 to 900, but currently it is supported by the font quality and browser restrictions.400And700Two files, which are equivalent to keywordsnormalAndbold

• Row Height

  • line-heightThe default value is 1.5, which is more comfortable and can be adjusted according to the actual situation.

• Hack must be annotated with the style written by a browser or the style of a browser BUG.

  // css.clearfix{    zoom:1; /* for IE6 IE7 */}