CSS specifications and css naming rules

CSS specifications and css naming rules

The selector, attribute, and value are all in lower case.

All labels, attributes, and values are in lower case in the xhtml standard, as is CSS.
Write a selector definition in a single row

It facilitates selector searching and reading, and inserts and edits new selector to facilitate module identification. Remove unnecessary spaces to compact the code and reduce line breaks.

If there is a nested definition, it can take the form of an internal single row.

/* Define a selector for a single row */. 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.

The semicolon (;) can be omitted before the end of braces. However, this may cause unnecessary errors and troubles for modification, addition, and maintenance.
Unit when the omitted value is 0

To save unnecessary bytes and make reading easier, we abbreviated 0px, 0em, and 0% to 0.

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

Use single quotes

The quotation marks in the url reference are omitted. single quotation marks are used for other places that require quotation marks.

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

Color value in hexadecimal notation

Unless you need to use rgba for transparency, use the # f0f0f0 representation and try to be abbreviated as much as possible.

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

Write in order based on the importance of attributes

Only the horizontal order is followed. The positioning layout class attributes are displayed first, the box model and other attributes are displayed, and the text class and modifier class attributes are finally displayed.

 

→	Show attributes	Attributes	Text attributes and other modifiers
	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 the attribute is correlated, do not separate the data.

/* The height here is related to line-height */. m-box {position: relative; height: 20px; line-height: 20px; padding: 5px; color: #000 ;}

 

Private before, standard after

First write with the private logo of the browser, then write the W3C 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 to the selector are written in the previous line of the commented object, and comments to attributes and values are written after semicolons.

There must be spaces at both ends of the comment content. Make sure that the style can be correctly parsed even if the encoding is incorrect.

When necessary, you can use block comments to maintain uniform indentation and alignment.

In principle, each series style requires a comment indicating the name, purpose, and precautions in a concise manner.

/* Block comment text */. m-list {width: 500px ;}. m-list li {height: 20px; line-height: 20px;/* here is a comment on line-height */overflow: hidden ;}. m-list li a {color: #333;}/* single line comment text */. m-list li em {color: #666 ;}

Hack is not allowed in principle.

Many incompatibility problems can be solved by changing methods and ideas, rather than having to use Hack. Based on experience, you can bypass some compatibility problems.

A reasonable structure and style rarely encounter compatibility problems.

The appropriate Hack can be used when we cannot avoid it due to browser defects.
Uniform Hack Method

Use "*" and "_" to Hack IE7 and 6 respectively. The following code is used:

/* IE7 will show gray #888, IE6 will show white # fff, other browsers will show Black #000 */. m-list {color: #000; * color: #888; _ color: # fff ;}

Recommended and abbreviated values

"It is recommended that it be appropriate" because abbreviations always contain a series of values. Sometimes we do not want to set a value, but it causes trouble. At this time, you can separate the abbreviations.

Of course, when all can be abbreviated, be sure to abbreviation. The biggest benefit is that it saves byte, facilitates maintenance, and makes reading clearer.

For the abbreviations, see the css manual.
Selector Sequence

Consider the following sequence:

From large to small (subject to the selector range)
From low to high (based on the level)
First served (based on the order in the structure)
From parent to child (based on the nested structure)

The following is a simple example:

/* From large 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;}/* first served */. 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 = intra-row style.

B = the number of ID selectors.

C = number of class, pseudo class, and attribute selector.

D = number of type selectors and pseudo element selectors.

 

 

 

 

Selector	Level (a, B, c, d)
Style = ""	1, 0, 0
# Wrapper # content {}	0, 2, 0, 0
# Content. dateposted {}	0, 1, 0
Div # content {}	0, 1, 1
# Content p {}	0, 1, 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