When writing CSS code at work, redundant code is often displayed, especially written with the "visible" tool. In order to improve the code quality and minimize file compression, to make the code readable, we have to simplify the CSS code. The following uses some common attributes as an example:
Margin
Margin-top: 1px;
Margin-right: 1px;
Margin-bottom: 1px;
Margin-left: 1px;
The code is simplified to: margin: 1px
Margin-top: 1px;
Margin-right: 2px;
Margin-bottom: 1px;
Margin-left: 2px;
Code is simplified to: margin: 1px 2px
Margin-top: 1px;
Margin-right: 2px;
Margin-bottom: 3px;
Margin-left: 2px;
Code simplification: margin: 1px 2px 3px
Margin-top: 1px;
Margin-right: 2px;
Margin-bottom: 3px;
Margin-left: 4px;
Code simplification: margin: 1px 2px 3px 4px
When the value of the attribute is 0, the unit can be written as 0 without writing, for example, 0px.
Padding
The writing method of padding is the same as that of margin.
Border
Border-width: 1px;
Border-style: solid;
Border-color: #000000;
Code is simplified to: border: 1px solid #000
Background
Background-color: # CCFFFF;
Background-image: url (image path );
Background-repeat: repeat-x;
Background-position: 5px 4px;
The code is simplified to: background: # CFF url (image path) repeat-x 5px 4px
Font
Font-size: 26px;
Font-weight: bold;
Font-family: "";
The code is simplified to: font: 26px bold ""
Color attribute value
Color: #000000;
Color: # ff0000;
The code is simplified to: color: #000, color: # f00