Css writing specifications

1. The default attributes of different browser elements are different. You can use Reset to Reset some default attributes of browser elements to achieve browser compatibility.
/** Clear internal and external margins **/
Body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
/* Structural elements structure element */
Dl, dt, dd, ul, ol, li,
/* List elements */pre,
/* Text formatting elements text format element */
Form, fieldset, legend, button, input, textarea,
/* Form elements form Element */
Th, td,
/* Table elements table element */
Img/* img elements Image Element */
{Border: medium none; margin: 0; padding: 0 ;}
/** Set the default font **/body, button, input, select, textarea
{Font: 12px/1.5 'body', tahoma, Srial, helvetica, sans-serif ;}
H1, h2, h3, h4, h5, h6 {font-size: 100% ;}
Em {font-style: normal;}/** reset list element **/
Ul, ol {list-style: none ;}
/** Reset hyperlink element **/
{Text-decoration: none; color: #333 ;}
A: hover {text-decoration: underline; color: # F40 ;}
/** Reset Image Element **/img {border: 0px ;}
/** Reset table elements **/
Table {border-collapse: collapse; border-spacing: 0 ;}

2. Good naming habits

3. Code abbreviation
Li {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 1.2em;
Line-height: 1.4em;
Padding-top: 5px;
Padding-bottom: 10px;
Padding-left: 5px;
}
Change
Li {
Font: 1.2em/1.4em Arial, Helvetica, sans-serif;
Padding: 5px 0 10px 5px;
}

4. inherit from CSS
If multiple child elements of the parent element on the page use the same style, it is best to define the same style on the parent element,
Let them inherit these CSS styles.
In this way, you can maintain your code and reduce the amount of code. The Code is as follows:
# Container li {font-family: Georgia, serif ;}
# Container p {font-family: Georgia, serif ;}
# Container h1 {font-family: Georgia, serif ;}
# Container {font-family: Georgia, serif ;}

5. Use multiple Selector

You can merge multiple CSS selectors into one, if they have a common style.
In this way, the code is concise and saves you time and space. For example:
H1 {font-family: Arial, Helvetica, sans-serif; font-weight: normal ;}
H2 {font-family: Arial, Helvetica, sans-serif; font-weight: normal ;}
H3 {font-family: Arial, Helvetica, sans-serif; font-weight: normal ;}
Can be merged
H1, h2, h3 {font-family: Arial, Helvetica, sans-serif; font-weight: normal ;}

6. Proper code comments

7. Sort your CSS code

If all the attributes in the code can be sorted by letters, the search and modification will be faster:

/*** Style attributes are sorted by letter ***/
Div {
Background-color: # 3399cc;
Color: #666;
Font: 1.2em/1.4em Arial, Helvetica, sans-serif;
Height: 300px;
Margin: 10px 5px;
Padding: 5px 0 10px 5px;
Width: 30%;
Z-index: 10;
}
9. Select a better style property value

Some attributes in CSS use different attribute values. Although the effect is similar, there are differences in performance, such

The difference is that border: 0 sets border to 0px. Although it cannot be seen on the page, the browser still renders border-width/border-color according to the default value of border, that is, the memory occupied.

While border: none sets border to "none", that is, none. When the browser parses "none", no rendering action is made, that is, no memory value is consumed. Therefore, we recommend using border: none;

Similarly, display: none hides the object. The browser does not render the object and does not occupy memory. Visibility: hidden.

10. Replace @ import with <link>.

First, @ import is neither an XHTML tag nor a part of the Web standard. It is not highly compatible with earlier browsers and has some negative impact on website performance. For details, refer to high-performance website design: Do not use @ import. Therefore, avoid using @ import

11. Use an external style sheet

This principle is always a good design practice. It is not only easier to maintain and modify, but more importantly, it can improve the page speed by using external files, because CSS files can generate cache in the browser. CSS built in the HTML document will be re-downloaded with the HTML document in each request. Therefore, in actual application, there is no need to build CSS code into HTML documents:

12. Avoid using CSS expressions)

CSS expressions are powerful but dangerous methods to dynamically set CSS attributes.

13. Code Compression

When you decide to deploy the website project on the network, you need to compress the CSS, comment out the comments and spaces to make the webpage Load faster. To compress your code, you can use some tools, such as YUI Compressor.

It can be used to streamline CSS code and reduce the file size for higher loading speed.