CSS specification-code format

Selectors, attributes, and values use lowercase

The XHTML standard specifies that all tags, attributes, and values are lowercase, as is the case with CSS.
One-line completion of a selector definition

Easy to find and read the selector, but also easy to insert new selectors and editing, easy to identify the module. Remove extra spaces to make the code compact and reduce line breaks.

If you have nested definitions, you can take the form of an internal single line.

/*single row defines a selector*/. m-list li,.m-list h3{width:100px;padding:10px;Border:1px solid #ddd;}/*This is a selector with nested definitions*/@media All and (max-width:600px){. M-class1. Itm{height:17px;Line-height:17px;font-size:12px;}. M-class2. ITM{width:100px;Overflow:Hidden;}}@-webkit-keyframes showitm{0%{height:0;Opacity:0;}100%{Height:100px;Opacity:1;}} 

The last value also ends with a semicolon

Usually the value before the end of the curly brace can omit the semicolon, but doing so will cause unnecessary errors and hassles in the modification, addition, and maintenance work.
Omitting a unit with a value of 0 o'clock

In order to save unnecessary bytes and make it easy to read, we abbreviated the 0px, 0em and 0% equivalents to 0.

. M-box {margin:0 10px; background-position:50% 0

Use single quotation marks

Omit the quotation marks in the URL reference, and use single quotation marks where other quotes are required.

. M-box {background:url (bg.png);} . M-box:after {content:'. '

Use 16 binary to represent color values

Unless you need transparency and use RGBA, use #f0f0f0 as a means of representation and try to abbreviate it.

. M-box {color:#f00; background:rgba (0,0,0,0.5)

Write sequentially based on the importance of attributes

Just follow the horizontal order, first show the positioning layout class properties, the back box model, such as its own properties, and finally the text class and decorated class properties.

→	Display Properties	own Properties	Text properties and other adornments
	display	width	font
	visibility	height	text-align
	position	margin	text-decoration
	float	padding	vertical-align
	Clear	border	white-space
	list-style	overflow	color
	top	min-width	background

. M-box {position:relative; width:600px; margin:0 auto 10px; text-align:Center; color:#000

If there is an association between attributes, do not separate the write.

/**/. M-box{position:relative;  Height:20px; line-height:20px; padding:5px; color:#000

Private in front, standard in the rear

First write with the browser private logo, after writing the standard.

. M-box {-webkit-box-shadow:0 0 0 #000; -moz-box-shadow:0 0 0 #000; Box-shadow:0 0 0 #000

Comment Format:/* Comment Text */

Comments on the selector are written uniformly on the previous line of the annotated object, and comments on attributes and values are written after the semicolon.

Note that spaces are required on both sides of the content to ensure that the style is parsed correctly even in the case of a coding error.

If necessary, block annotations can be used, and block annotations maintain uniform indentation alignment.

In principle, each series of styles need to have a note, concise description of the name, use, precautions and so on.

/*Block Comment Text * block Comment text * block comment text*/. M-list{width:500px;}. m-list Li{Height:20px;Line-height:20px;/*here is a comment on the line-height*/Overflow:Hidden;}. m-list Li a{Color:#333;}/*single-line Comment text*/. m-list li em{Color:#666;}

In principle, the use of hack is not permitted

Many incompatibilities can be solved by changing methods and ideas, not necessarily hack, and by experience you can bypass some compatibility issues.

A reasonable structure and reasonable style, is rarely encountered compatibility problems.

Due to the browser's own flaws, we can allow the use of appropriate hack when we cannot avoid it.
Unified Hack Method

Uniform Use of "*" and "_" for IE7 and 6 respectively for the hack. As shown in the following code:

 /*   IE7 will show Gray #888,ie6 will show White #fff, other browsers display black #  */ .m-list  {color :  #000 ; *color :  #888 ; _color :  #fff ;} 

Recommended and appropriately abbreviated values

"Recommended and appropriate" is because the abbreviation always contains a series of values, and sometimes we do not want to set a value, instead of causing trouble, then you can not abbreviate, but write separately.

Of course, in the case of everything that can be abbreviated, be sure to abbreviate it, its greatest benefit is that it saves bytes, facilitates maintenance, and makes reading more visible.

Refer to the CSS Manual for an abbreviated method.
Selector order

Please consider the following sequence according to the combination:

From large to small (whichever is the selector range)
From low to high (whichever is the highest level)
Binate (subject to structural succession)
From parent to child (based on structure nesting)

The following is a simple demonstration:

/*from big to small*/. M-list P{margin:0;padding:0;}. M-list P.part{margin:1px;padding:1px;}/*from low to high*/. M-logo a{Color:#f00;}. M-logo a:hover{Color:#fff;}/*binate to the rear*/. G-HD{Height:60px;}. G-BD{Height:60px;}. g-ft{Height:60px;}/*from parent to child*/. M-list{width:300px;}. m-list. ITM{float: Left;}

Selector level

A = inline styles style.

b = number of ID selectors.

c = Number of classes, pseudo-classes, and attribute selectors.

d = number of type selectors and pseudo-element selectors.

Selector

Selector	level (A,B,C,D)
Style= ""	1,0,0,0
#wrapper #content {}	0,2,0,0
#content. dateposted {}	0,1,1,0
Div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
P.comment. dateposted {}	0,0,2,1
Div.comment p {}	0,0,1,2
. Comment P {}	0,0,1,1
P.comment {}	0,0,1,1
. Comment {}	0,0,1,0
div p {}	0,0,0,2
P {}	0,0,0,1

CSS specification-code format