CSS Universal Coding Specification

CSS Universal Coding Specification

Summarize part of the front-end coding specifications, CSS parts first, mostly more general, should be the mainstream way bar.

1 Preface

The goal of this document is to make the CSS code consistent in the style of the team, easily understood and maintained.

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

2 CSS naming methods

• Keep class named full lowercase, you can use dashes (do not use underscores and CamelCase camel-named)
• Dashes should be a natural discontinuity of related classes. (for example,. btn and. Btn-blue).
• Avoid over-using shorthand: BTN can describe a button well, but. t cannot represent any element.
• The class should be named as short as possible, and be as clear as you can.
• Use meaningful names, and use structural or action-targeted correlations rather than abstract names.
• Global universal naming, you need to add a specific prefix such as ' zk-wrap '
• Local naming can be prefixed to the contents of the module or to the nearest parent node

3 CSS Infrastructure

• Encoding format: File encoding format ' UTF-8 ' encoding, in CSS file shelf location Declaration document encoding CharSet

  @charset "utf-8";

4 Coding Style

• Indentation: Use a 4 space as an indent level, with no 2 spaces or tab characters allowed.

• Space

  • 选择器{must contain spaces between and.
  • 属性名:spaces are not allowed between and after, : and 属性值 spaces must be included between them.
  • 列表型属性值When you write in a single line, , you must follow a space.

• Selector Selector

  • If it is not necessary, you must not qualify for the id , class selector Add type selector.
  • The nesting level of the selector should not be less than the 3 level, the position after the qualification should be as accurate as possible
  • >, + and ~ a space is reserved on each side of the selector.

• Property

  • The property definition must have a different row.
  • The property definition must end with a semicolon.
  • Use attribute abbreviations as much as possible when abbreviations are available.

  • Attribute prefixes, the standard attribute is placed at the end, and is easily read by a colon, and also facilitates multi-line editing within the editor.

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

• Attribute writing order: position > Box model > Layout > Appearance > Others

  • Positioning location

    // 包括 float、display、overflow……position: absolute;top: 50px;left: 0;overflow-x: hidden;

  • Box Model Boxes

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

  • Typographic typesetting

    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 floats float, the parent label must clear the float, by the way the pseudo-class is set clear clearfix . Try not to use the method of adding empty tags. Faq

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

• Color

  • RGB color values must use hexadecimal notation #rrggbb . Not allowed to use rgb() .
  • When the color value can be abbreviated, you must use the abbreviation form,border-color: #ccc;
  • Color values do not use the English name color values, such ascolor:red
  • Color values are best used in lowercase characters

• Numerical

  • When the value is 0 o'clock, the unit can be omitted,padding: 0; margin: 0;
  • When the number is a decimal between 0-1, the integer part is omitted 0 , asopacity: .8;

• Z-index generally 5 or 10 for a step size (such as 50,60,70), easy to add or modify later

• !important ' Try not to use the !important declaration.

• Font

  • The font family name in the
  • font-family   property should use the English   of the font, and family name , where there are spaces, should be placed in quotation marks.

  • The so-called English Family name, a metadata for the font file, the common name is as follows:

    font	operating system	famil Y Name
    Arial (XXFarEastFont-Arial)	Windows	simsun
    blackbody (medium and easy blackbody)	Windows	simhei
    Microsoft Black	Windows	Microsoft Yahei
    Microsoft is black	Windows	Microsoft jhenghei
    Chinese blackbody	mac/ios	stheiti
    Holly blackbody	mac/ios	hiragino Sans GB
    Wenquanyi Zen Hei black	Linux	wenquanyi Zen Hei
    Wen Quan shu-micron black	Linux	wenquanyi Micro Hei

     //css usage h1 {font-family: "Microsoft Yahei";}  

• Size

  • The Chinese content that needs to be displayed on the Windows platform should be no smaller than the font size 12px .

• Character weight

  • CSS Word 100–900 A total of nine, but currently subject to the font itself and browser limitations, in fact, support 400 and 700 two files, respectively, equivalent to the keywords normal andbold

• Row height

  • line-heightThe default global definition is 1.5 more comfortable, can be adjusted according to the actual situation

• Hack a style that is written for a browser or a browser bug, you must add a comment description

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

CSS Universal Coding Specification