General CSS coding specifications-kingzhi

Source: Internet
Author: User
General CSS coding specifications-General CSS coding specifications for kingzhi

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 */}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.