How to optimize your CSS code?

I have recently read SKIN CSS files created by many netizens and found many redundant codes. Next I will introduce how to clear redundant code to make your CSS file more concise.
I. Attributes of margin and padding
We can see from relevant information that margin and padding represent the external margin and internal padding distance. In the CSS of many netizens, the redundant code about these two attributes is the most common. For example: margin: 0px. You can check whether there are many margin: 0px in your CSS file, some of which are not needed. You can try to delete it, of course, not all margin: 0px are useless, the same is true for padding: 0px.
In addition, the order of attributes in margin and padding is: Upper right bottom left, you just need to remember that it is clockwise. Let's take a look at the two codes:
Margin: 0px 0px 0px 10px;
Margin-left: 10px;
In fact, they serve the same purpose. The following is an abbreviation. We can use the abbreviation to reduce CSS code and make it easier to read. (The same is true for padding .)
II ,! Important; attributes
! Important is a syntax defined in CSS1 to improve the application priority of a specified style rule. IE does not support this syntax, but other browsers support it. From this point, we can know that code with priority setting will not be executed by IE. Therefore, we can add CSS styles behind important to distinguish it from browsers such as IE and FireFox.
When I was reading the CSS code of Miles last time, I saw the following sentence:
Height: 50px! Important; height: 50px;
This is redundant. We can write the following code: height: 50px. This error also appeared when I first started making CSS.
III. text-align and font styles
I will not mention the role of these two styles, but these two styles also have a lot of redundancy in CSS of many netizens. The layer definition is as follows:
<Div id = "main">
<Div id = "body1">
<Div id = "content1">
</Div>
</Div>
<Div id = "body2">
</Div>
<Div>
# Main {width: 500px; text-algin: left; font-size: 12px; color: #000000 ;}
# Body1 {width: 500px; text-algin: center; font-size: 12px; color: # FF0000 ;}
# Content {text-algin: left; font-size: 12px; color: #000000 ;}
# Body2 {text-algin: left; font-size: 12px; color: #000000 ;}
As you can see from the code above, there are a lot of redundant code. Now let's write the correct code:

Example Source Code []
# Main {width: 500px; text-algin: left; font-size: 12px; color: #000000 ;}
# Body1 {text-algin: center; color: # FF0000 ;}
# Content {width: 300px; text-algin: left; color: #000000 ;}
# Body2 {}
The above is the correct code. This error occurs only when you are not clear about the DIV structure of PJBLOG during SKIN.

IV. Use of display: none
Display: none is used to prevent the defined layer from being displayed. Let's take a look at this code:

Example Source Code []
# BlogTitle {font-size: 0px; margin: 10px 3px 3px 40px; height: 20px; color: # FFC1E6; display: none}
Do you think this is redundant? Yes, since no display is set, why do you need to keep unnecessary styles? In this case, I know that this SKIN is changed from someone.

5. margin and padding
I will show you through examples that the layer definition is the same as above. The following is the definition of CSS (incorrect example ):

Example Source Code []
# Main {margin: 5px 0px 5px 0px ;}
# Body1 {margin: 12px 0px 10px 0px ;}
# Content {margin: 8px 0px 2px 0px ;}
# Body2 {margin: 10px 0px 15px 0px ;}
Now let's write the correct style:

Example Source Code []
# Main {}
# Body1 {margin-top: 17px ;}
# Content {margin: 8px 0px 2px 0px ;}
# Body2 {margin: 20px 0px ;}
You need to make an example to understand this. First, # main {margin: 5px 0px 5px 0px;} is unnecessary. It defines the top and bottom margins of the entire page. (This is required in some cases) we can also define the top margin of # body1 and the bottom margin of # body2, so we have # body1 {margin-top: 17px;} and # body2 {margin: 20px 0px;} (the upper and lower margins of # body2 are defined as 20px, and the left and right margins are 0 px, which is also an abbreviated method .)
In the same way, we can omit the bottom margin of # body1 and define the top margin on the # content layer. In addition, you must first figure out the nested relationship of the layer. Otherwise, an error will occur.