CSS Coding Specification

CSS encoding Specification 1 Code style 1.1 line length

(1) No more than 120 characters per line, unless one line is indivisible.

1.2 Properties

(1) The attribute definition must end with a semicolon.

1.3 Other

(1) If the CSS3 attribute is used, add the browser prefix if necessary, and the standard attribute is written in the order (-webkit-/-moz-/-ms-/-o-/STD), and the property name is aligned.
Example:

{    -webkit-animation: mymove 5s Infinite;         -moz-animation: mymove 5s Infinite;           -o-animation: mymove 5s Infinite;              animation: mymove 5s infinite;}

2 General 2.1 Notes

(1) Add comment at top of file
Example:

/* * @description: xxxxx Chinese Description * @author: hejf* @update: 2016-01-18 18:32 */

(2) Add module comments
Example:

/**//**/

2.2 Selector

(1) Do not qualify for the ID, class selector add type selector, if not necessary. (Explanation: There is a certain impact on performance and maintainability.) ）
Example:

/**/{    font-color: #c00;} /*  */{    font-color: #c00;}

(2) The nesting level of the selector should be no greater than 3 levels, the position after the qualification should be as accurate as possible.

/**/{}{}/**/{}{}

(3) The name avoids using pinyin, should adopt the more concise semantic English word to combine, avoids by the 1, 2, 3 and so on ordinal name
(4) Avoid setting the style directly to the label.
(5) Disable the use of the * selector in CSS.

2.3 Properties

(1) 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 : ;  Font-size :  12px ;  Line-height :  1.5 ;} 

(2) Properties under the same rule set should be grouped by function when writing, with formatting model (layout, position) > Box model (Size) > typographic (Text related) > visual (Visual Effects) In order to improve the readability of the code.
Explain:
Formatting Model related properties include: Position/top/right/bottom/left/float/display/overflow, etc.
Box Model related properties include: Border/margin/padding/width/height, etc.
Typographic related properties include: Font/line-height/text-align/word-wrap, etc.
Visual related properties include: Background/color/transition/list-style, etc.
The link style should be added in the following order: a:link > A:visited > A:hover > A:active
Also, if you include the content attribute, you should put it in front.
Example:

. Sidebar{/*formatting model:positioning schemes/offsets/z-indexes/display/...*/position:Absolute;Top:50px; Left:0;Overflow-x:Hidden;/*box model:sizes/margins/paddings/borders/...*/width:200px;padding:5px;Border:1px solid #ddd;/*typographic:font/aligns/text styles/...*/font-size:14px;Line-height:20px;/*visual:colors/shadows/gradients/...*/background:#f5f5f5;Color:#333;-webkit-transition:color 1s;-moz-transition:color 1s;transition:color 1s;}

(3) 0 is not required after the unit, such as 0px can be omitted to 0,0.8px can be omitted into. 8px.
(4) If possible, color as far as possible with three-bit characters, such as #aabbcc written #abc, color values are not allowed to use named color values. 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.
(5) To keep the code decoupled, try to merge the duplicated styles as much as possible.
Example:

{ color: #000;}  { color: #000;}  { color: #000;}

(6) When the length is 0, the unit can be omitted.
Example:

/** *{    padding: 0 5px;} /*  */{    padding: 0px 5px;}

2.4!important

(1) Try not to use the!important declaration.
(2) Define styles by inline and!important tags when you want to force a style to be specified and do not allow any scene overrides.

2.5 @import

(1) The @import is much slower than the <link>, which not only increases the number of requests, but also causes unforeseen problems.
Alternative approach:
Use multiple elements;
Compile multiple CSS files into a single file by Sass or less similar CSS preprocessor;
Other CSS file merging tools;

2.6 Z-index

(1) Z-index is layered to manage the visual hierarchy of absolute positioning elements outside the document flow. (Explanation: Multiple elements of the same layer, such as multiple Dialog triggered by user input, use the same z-index or increment z-index within that level.) It is recommended that each layer contains 100 z-index to accommodate enough elements, which can be adjusted if there are more elements in each layer. ）
Alternative approach:
(2) In a controlled environment, the desired element is displayed in the topmost layer, and the z-index is specified as 999999.

3 Value and Unit 3.1 text

(1) Text content must be enclosed in double quotation marks. (Explanation: The content of a 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: "" ";}

4 Text Orchestration 4.1 font family

(1) The font family name in the font-family attribute 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:

{    font-family: "Microsoft Yahei";}

4.2 Font Size

(1) The Chinese content that needs to be displayed on the Windows platform should be no less than 12px in size. (Explanation: 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 under the circumstances) display poor results, resulting in difficulty reading. ）

5 Transformations and animations

(1) Transition-property should be specified when using transition.
Example:

/**/{    transition: color 1s, border-color 1s;} /*  */{    transition: all 1s;}

(2) If possible, add transitions and animations to the properties that the browser can implement efficiently.
Explain:
There are four types of transformations that should be selected where possible:

  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 Compatibility 6.1 hack

(1) When you need to add hack, you should consider if possible other ways to resolve. (Explanation: 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. ）
(2) Try to use selector hack to handle compatibility rather than attribute hack. (Explanation: Try to use CSS syntax-compliant selector hack to avoid some third-party libraries that do not recognize hack syntax issues.) ）
Example:

/**/{    margin-top: 3px;     Padding: 5px;} /*  */{    margin-top: 5px;     Padding: 4px;}

(3) Try to use simple attribute hack.
Example:

{    _display: inline/**/     float: left;     Margin-left: 20px;}  {    overflow: hidden;     *zoom: 1/**/}

6.2 Expression

Try to avoid using Expression

7 Site CSS Schema 7.1 css Reset

When writing CSS styles, you need to first introduce the reset style.

7.2 Site CSS Schema

The CSS schema of the Web site is written in the order of CSS reset > Basic general style > Web site General style (including general-purpose buttons, site headers, bottom of site, General page pagination, etc.) > individual page Special styles.
Example:

/*Reset*/BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,FORM,LEGEND,INPUT,TEXTAREA,P,TH,TD{margin:0;padding:0;}A,button,select,textarea,input{Outline:None;}img{Border:0;vertical-align:Bottom;}em{Font-style:Normal;}textarea{Resize:None;}Body{Font:12px/1.5 \5b8b\4f53,helvetica,arial,sans-serif;}a{text-decoration:None;}a:hover{text-decoration:None;}Ol,ul{List-style:None}/*Basic general Style*/. mL30{Margin-left:30px;}. ABS{position:Aboulute;}...../*Web site General style*/. Submit-btn{background:#ff0;Color:#fff;padding:3px 2px;}cancel-btn{background:#bf2;Color:#fff;padding:3px 2px; }...../*Home Style*/..../*Customer Service page Styles*/....../*Contact Us page style*/......

CSS Coding Specification