7 tips for CSS optimization

I. Use css abbreviations
Using abbreviations can help reduce the size of your CSS file and make it easier to read. For the main rules of css abbreviations, see common css abbreviations syntax summary, which is not described here.
II. Define the unit unless the value is 0
Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = 100, but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the row height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units.
III. Case Sensitive
When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case. The values of class and id are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.
4. Cancel the element limitation before class and id
When you write an element to define a class or id, you can omit the previous element limitation, because ID is unique in a page and cannot be used multiple times on the page. It makes no sense to limit an element. For example:

The code is as follows:	Copy code
Div # content {/* declarations */} Fieldset. details {/* declarations */} Can be written # Content {/* declarations */} . Details {/* declarations */}

This saves some bytes.
5. Default value
Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, you can first define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as shown in the following code:

The code is as follows:	Copy code
*{ Margin: 0; Padding: 0; }

6. Do not need to repeatedly define the value that can be inherited
In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. Defined in the parent element, the child element can be inherited directly without repeated definitions. However, the browser may use some default values to overwrite your definition.
VII. Recent priority principle
If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code.
Update: Lorem ipsum dolor set
In the CSS file, you have defined the element p and a classupdate.

The code is as follows:	Copy code
P { Margin: 1em 0; Font-size: 1em; Color: #333; } . Update { Font-weight: bold; Color: #600; }

In these two definitions, class = update will be used because the class is closer to p. For more information, see W3C Calculating a selector's specificity.