about how CSS code writes specifications

Here for everyone to send a copy of the CSS code to write the guide, including code comments and naming conventions and space indentation and so readily available, are from everyone's usual convention, definitely worth learning from, the need for friends can refer to the next

1. Formatting code
1.1 File [recommended]:css file using UTF-8 encoding without BOM
1.2 Indent [Force]: use 4 spaces as an indent level, 2 spaces or tab characters are not allowed.

. selector {       margin:0;       padding:0;   }

1.3 Spaces

[Mandatory]: A space must be included between the selector and {.

. selector {   }

[Mandatory]: A space must be included between the selector and {.

margin:0;

[Mandatory]: The List property book is a single line, and must be followed by a space

Font-family:aria, Sans-serif;

1.4 Line Length [Mandatory]: each line must not exceed 120 characters unless the single line is indivisible.
[Recommended]: For extra-long styles, in the space of the style values or, after wrapping, it is recommended to group logically.

/* Different attribute values are logically grouped by */  background:       transparent URL (averyveryverylongurlisplacedhere)       no-repeat 0 0;   /* Multiple properties can be repeated, one row at a time */  background-image:       url (averyveryverylongurlisplacedhere)       URL ( Anotherveryveryverylongurlisplacedhere);   /* Property values for similar functions can be based on the indentation of the function call *  /background-image:-webkit-gradient (       linear, left       Bottombottom,       left Top,       color-stop (0.04, RGB (88,94,124)),       color-stop (0.52, RGB (115,123,162)))   ;

1.5 Selector

[Mandatory]: When a rule contains multiple selector, each selector declaration must have a single row.

/* Good */  . Post,   . Page,   . Comment {       line-height:1.5;   }   /* bad */  . Post,. Page,. Comment {       line-height:1.5;   }

[Force]: >, +, ~ The selector to keep a space on each side.

Example:

/* Good */  main > Nav {       padding:10px;   }   Label + input {       margin-left:5px;   }   input:checked ~ button {       background-color: #69C;   }   /* Bad */  Main>nav {       padding:10px;   }   label+input {       margin-left:5px;   }   Input:checked~button {       background-color: #69C;   }

The value in the [Force] property selector must be surrounded by double quotation marks.

CSS   /* good *  /article[character= "Juliet"] {       voice-family: "Vivien Leigh", Victoria, Female   }   /* Bad *  /article[character= ' Juliet ' {       voice-family: "Vivien Leigh", Victoria, Female   }

2. Selectors and attribute abbreviations

2.1 Selector [Mandatory] do not qualify for the ID, class selector add type selector, if it is not necessary.
Explanation: There is a certain impact on performance and maintainability.
Example:
Css

/* Good *  /#error,   . danger-message {       font-color: #c00;   }   /* Bad *  /dialog#error,   p.danger-message {       font-color: #c00;   }

[Recommended] The nesting level of the selector should be no greater than level 3, and the position should be as accurate as possible.

Example:

/* Good */  #username input {}   . Comment. Avatar {}/   * bad */  . page header. Login #username Input {}
  .comment p * {}

2.2 Attribute Abbreviations

[Recommended] If you can use abbreviations, use attribute abbreviations as much as possible.
Example:

/* Good */  . Post {       font:12px/1.5 arial, Sans-serif;   }   /* bad */  . Post {       font-family:arial, Sans-serif;       font-size:12px;       line-height:1.5;   }

[Recommended] When using abbreviations such as border/margin/padding, be aware of the effect of implied values on actual values, and you do need to set values in multiple directions to use abbreviations.

Explanation: Abbreviations such as border/margin/padding set values for multiple properties at the same time, easily overwriting settings that do not need to be overwritten. If some directions need to inherit values from other declarations, they should be set separately.
Example:

/* Centering <article class= "page" > Horizontally and highlight featured ones */  article {       margin:5px;
  border:1px solid #999;   }   /* Good */  . page {       margin-right:auto;       Margin-left:auto;   }   . Featured {       border-color: #69c;   }   /* bad */  . page {       margin:5px auto;/* Introducing redundancy */  }   . featured {       border:1px solid #69c; /* Introducing redundancy */  }

2.3 Leave a blank line between each rule set

/* Good */  . selector1 {     display:block;     width:100px;   }   . Selector2 {     padding:10px;     margin:10px auto;   }   /* bad */  . selector1 {     display:block;     width:100px;   }   . Selector2 {     padding:10px;     margin:10px Auto;   }

3. Values and Units
3.1 text [Force] text content must be surrounded by double quotation marks.
Explanation: The content of the text type may be in selectors, property values, and so on.
Example:

/* Good *  /html[lang|= "zh"] Q:before {       font-family: "Microsoft Yahei", Sans-serif;       Content: "" ";   }   Html[lang|= "zh"] q:after {       font-family: "Microsoft Yahei", Sans-serif;       Content: "" ";   }   /* Bad *  /Html[lang|=zh] Q:before {       font-family: ' Microsoft yahei ', Sans-serif;       Content: ' "';   }   Html[lang|=zh] Q:after {       font-family: "Microsoft Yahei", Sans-serif;       Content: "" ";   }

3.2 Values [Force] When the number is a decimal between 0-1, the integer part of 0 is omitted.
Example:

/* Good *  /panel {       opacity:. 8   }/* bad */  Panel {       opacity:0.8   }

3.3 URL ()

The path in the [Force] URL () function is not quoted.
Example:

Body {       Background:url (bg.png);   }

3.4 Length [Force] The length of 0 o'clock shall omit the unit. (also only the length unit can save)
Example:

/* Good */  body {       padding:0 5px;   }   /* Bad */  body {       padding:0px 5px;   }

3.5 Colors

Force The RGB color values must be #rrggbb using hexadecimal notation. The use of RGB () is not allowed.

/* Good *  /. Success {       box-shadow:0 0 2px rgba (0, 0, 3);       Border-color: #008000;   }   /* Bad *  /. Success {       box-shadow:0 0 2px rgba (0,128,0,.3);       Border-color:rgb (0, 0);   }

The [force] color value can be abbreviated when it must be abbreviated.

Example:

/* Good *  /. Success {       background-color: #aca;   }   /* Bad *  /. Success {       background-color: #aaccaa;   }

The [force] color value does not allow the use of named color values.
Example:

/* Good *  /. Success {       color: #90ee90;   }   /* bad */  . Success {       color:lightgreen;   }

[Recommended] The English characters in the color values are lowercase. If you do not use lowercase, you need to ensure that the same case is consistent in the same project.

Example:

/* Good *  /. Success {       background-color: #aca;       Color: #90ee90;   }   /* Good *  /. Success {       background-color: #ACA;       Color: #90EE90;   }   /* Bad *  /. Success {       background-color: #ACA;       Color: #90ee90;   }

3.6 2D Location [Force] must be given both horizontal and vertical positions.
Explain:
The initial value is 0% 0%, but in one direction, the value in the other direction is resolved to center. In order to avoid the confusion of comprehension, we should give a value of two directions at the same time. Background-position the definition of a property value
Example:

/* Good */  body {       background-position:center top;/* 50% 0% */}/Bad  */  body {       Background-posi Tion:top; /* 50% 0% */  }

4. Text Orchestration
4.1 Font family [mandatory] The font family name in the Font-family property should use the English family name of the font, where there are spaces, which must be placed in quotation marks.
Explain:
The so-called English Family name, a meta-data for font files, is commonly named as follows:

Font	Operating System	Family Name
XXFarEastFont-Arial (Middle Yi Song body)	Windows	SimSun
Blackbody (medium and easy blackbody)	Windows	Simhei
Microsoft Ya-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 is black	Linux	Wenquanyi Zen Hei
Wen Quan Shu-micron Black	Linux	Wenquanyi Micro Hei

Example:

H1 {       font-family: "Microsoft Yahei";   }

[Mandatory] font-family by the "Latin font in front, the Chinese font in the back", "good (high quality/More to meet the needs of the font in front, the effect of the font in the post" in order to write, and finally must specify a universal font family (Serif/sans-serif)
Explain:
Refer to this article for more detailed instructions.
Example:

/* Display according to platform */  . Article {       font-family:arial, sans-serif;   }   /* Specific for most platforms *  /h1 {       font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "Wenquanyi Micro Hei "," Microsoft Yahei ", Sans-serif;   }

[Force] font-family is not case sensitive, but in the same project, the same family Name case must be uniform.
Example:

/* Good */  body {       font-family:arial, sans-serif;   }   H1 {       font-family:arial, "Microsoft Yahei", Sans-serif;   }   /* Bad */  body {       font-family:arial, sans-serif;   }   H1 {       font-family:arial, "Microsoft Yahei", Sans-serif;   }

4.2 Font Size [Mandatory] The Chinese content that needs to be displayed on the Windows platform should be no less than 12px in size.
Explanation: Because of the font rendering mechanism of Windows, text less than 12px is very poor and illegible.
4.3 font style [Recommended] To display the Chinese content on the Windows platform, do not use font-style except normal. Other platforms should also be used with caution.
Explain:
Because the Chinese font does not have the Italic style implementation, all browsers will be fallback to the Obilique implementation (automatically fitted to italic), under the small font size (especially under the small font size under Windows) display poor performance, resulting in difficulty reading.

5 transformations and animations You should specify transition-property when using transition.
Example:

/* Good */  . box {       transition:color 1s, border-color 1s;   }   /* bad */  . box {       transition:all 1s;   }

As much as possible, add transitions and animations to the properties that the browser can implement efficiently.
Explain:
See this article, where possible four transformations should be selected:

Transform:translate (NPX, npx);   Transform:scale (n);   Transform:rotate (ndeg);   opacity:0..1;

Typically, you can use translate instead of left as an animated property.
Example:

/* Good */  . box {       transition:transform 1s;   }   . Box:hover {       transform:translate (20px);/* Move right for 20px */* * Bad   */  . box {       left:0;       Transition:left 1s;   }   . box:hover {       left:20px;/* Move right for 20px */  }

6-Response Force Media Query If you have more than one comma-separated condition, you should put each condition in a separate row.
Example:

@media   (-webkit-min-device-pixel-ratio:2),/* webkit-based browsers *  /(Min--moz-device-pixel-ratio:2),    /* Older Firefox browsers (prior to Firefox) *  / (MIN-RESOLUTION:2DPPX),/* The standard min-resolution:192dpi  /* () {/           * dppx fallback */      * Ret Ina-specific Stuff here */  }

7.CSS Comment General comment

/* General Comment */

Block annotations

/**   * Module: M-detail   * author:xxx   * EDIT:   2016.5.02 */   

8.CSS Naming conventions
8.1 Naming the constituent names must consist of a word, an underscore. For example:. info,.news-list
It is not recommended to use Pinyin as a style name, especially for abbreviations, pinyin, and English.
All names are lowercase, using the underscore "-" as the connection character, not the underscore "_"
8.2 Naming prefixes

prefix	Description	Example
G	Global Universal Style naming	G-mod
M-	Module Naming method	M-detail
ui-	Component Naming methods	Ui-selector
J-	All names used for pure interaction do not involve any style rules.	J-switch

Selectors that start with a similar:. info,. Current,. News are not allowed, such as:

. Info{srules;}

Because it will bring us unpredictable management problems and a heavy historical burden. You will never know which style names have been used, and if you are a newcomer, you may encounter a style that has the same name as each name you define, and then you can only change the style name or overwrite the rule. So we recommend writing this:

. m-xxx. Info{srules;}

All selectors must start with a prefix of G, M, ui-, and so on, meaning that all rules must be in a relative scope to take effect, minimizing global pollution. J-This level of classname is completely jser customized, but the naming rules can also be consistent with refactoring, such as the use of pinyin and other

8.3 named words are not named by performance, but are named according to their content. For example: left, right, center, red, black this to the performance of the naming, not allowed to appear;
It is recommended to use the naming of functional and content-related terms, such as:
Select all copy and put in notes: Package
Albums: Photo-album
Works: Works
Raiders: Raiders
Normal User: Normal-user
Talent: Talent-user
Photographer: Photographer
User nickname: User-alias
Head: Head
Region: Area
Number of followers: follow
Number of fans: followers
Note to each other: attention
Tags: label
Release Date: Publish-date,publish-time
Caption: Title
Info: Info
Contents: Content
About me: About
Synopsis Content: Intro-content
Comments: Review
Services: Service
Cover: Cover
Popularity: Popular
Favorite: Collect
View: View
Appointment: Reservation
Promotion: Sale-promotion

9. Compatibility
9.1 Attribute prefix [force] attributes with a private prefix are arranged from long to short, aligned by the colon position.
Explain:
The standard properties are at the end of the line, which is easy to read by colons, and also facilitates multiple lines of editing within the editor.
Example:

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

9.2 Hack [Recommended] When you need to add hack, you should consider if possible other ways to resolve it.
Explain:
If you can achieve the desired style through a reasonable HTML structure or using other CSS definitions, you should not use the Hack method to solve the problem. Usually hack can lead to an increase in maintenance costs.
[Recommended] Use selector hack to handle compatibility rather than attribute hack.
Explain:
Try to use CSS-compliant selector hack to avoid problems with the hack syntax that some third-party libraries do not recognize.
Example:

/* IE 7 */  *:first-child + HTML #header {       margin-top:3px;       padding:5px;   }   /* IE 6  * * HTML #header {       margin-top:5px;       padding:4px;   }

[Recommended] Try to use simple attribute hack.
Example:

. box {       _display:inline;/* Fix double margin */      float:left;       margin-left:20px;   }   . container {       Overflow:hidden;       *zoom:1; /* Triggering haslayout */  }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations: