CSS Development Specification

Although a simple CSS specification was compiled a long time ago, it was not very comprehensive and some details were not taken care of. Record a more detailed version to prepare for a rainy day.

Naming conventions

1. the "mandatory" class is named with the lowercase letter + underscore format: class= "Class_name"
2. "Mandatory" ID all use hump name law: id= "Idname"
3. "suggested" name as far as possible to use English name, pinyin can also use but try to use abbreviation + English form.

Writing specifications"Mandatory"Add a space before the property value

. Main {     margin: 0;   }

"Mandatory"Leave a space on each side of the >, +, ~ Selector.

/**/{    padding: 10px;     Margin-left: 5px;} /*  */{    padding: 10px;     Margin-left: 5px;}

"Recommended"Minimize the level of selectors, preferably no more than level four"Recommended"Attributes should appear in a specific order to guarantee legibility of the recommended order: class, ID, name, data-*, SRC, for, type, href, value, Max-length, max, Min, pattern, placeholder , title, ALT, required, READONLY, disabled

Class is designed for highly reusable components, so it should be in the first place; the ID is more specific and should be used as sparingly as possible, so put it in the second place.

"Mandatory"A unit of length 0 in a style must be omitted

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

"Recommended"Color values use lowercase as much as possible, and the same color values do not occur when the case is present. If not lowercase, you need to keep the same case in the same project.

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

"Mandatory"The font name in the Font-family property should use the font's English

Common fonts correspond to family name: Arial (SimSun), Blackbody (Simhei), Microsoft Jache (Microsoft Yahei)

"Mandatory"Try to increase the reusability of the style and use the style as a generic class

. Left {    float: left;} . Right {    float: right;}

"Mandatory"If more than one class style is repeated, only the individual styles are different, you can separate the repeating style.

/*Good*/. Container. List. quan,.container. List. Friend{Display:Inline-block;width:4.5rem;Height:4.5rem;background-size:4.5rem Auto;}. Container. List. Quan{background-position:0 0;}. Container. List. Friend{background-position:0-4.5rem;}/* Bad*/. Container. List. Quan{Display:Inline-block;width:4.5rem;Height:4.5rem;background-size:4.5rem Auto;background-position:0 0;}. Container. List. Friend{Display:Inline-block;width:4.5rem;Height:4.5rem;background-size:4.5rem Auto;background-position:0-4.5rem;}

CSS Development Specification