Efficient Clean CSS code principles (bottom line)

6. Appropriate code comments

Code comments can make the structure clearer by making it easier for others to read your code, and to organize code annotations appropriately. You can choose to do the start of the style sheet by adding a directory:

/**/

So the structure of your code is straightforward, and you can easily find and modify the code.

The main content of the code should also be properly divided, even where necessary to comment on the code, which is also conducive to team Development :

/** * Header * **/#header {height:145px; position:relative;} #header h1{width:324px; margin:45px0 020px;float: Left; height:72px;}/** * Content * **/#content {background: #fff; width:650px ;float: Left; min-Height:600px;overflow:hidden;} #content h1{color: #F00}/*Set Font Color*/#content. Posts{overflow:hidden;} #content. Recent{margin-bottom:20px; border-bottom:1px solid #f3f3f3;p Osition:relative;overflow:hidden;}/** * Footer * **/#footer {clear:both; padding:50px 5px0; Overflow:hidden;} #footer h4{color: #b99d7f; font-family:arial helvetica,sans-serif;font-size:1.1em; }

7. Sort your CSS code

If the attributes in your code are sorted alphabetically, it's quicker to find the changes:

    /* * * Style properties Sorted alphabetically * * */     div{    background-color: #3399cc;    color:#666;    Font:1. 2em/1. 4em Arial, Helvetica, sans-serif;    height:300px;    margin:10px 5px;     0 10px 5px;    Width:%;    Z-index:ten;    }

8. Keep the CSS readable

Writing a readable CSS will make it easier to find and modify styles. For the following two cases, which is more readable, I would like to make it clear.

   /** * Write one line per style attribute * **/div{Background-color: #3399cc; color:#666; Font:1.2em/1.4em Arial, Helvetica, sans-serif;    height:300px;    margin:10px 5px; padding:5px010px 5px; Width: -%; Z-index:Ten; }    /** * All style attributes are written on the same line * **/Div{background-color: #3399cc; color:#666; Font1.2em/1.4em Arial, Helvetica, Sans-serif; height:300px; margin:10px 5px; padding:5px010px 5px; Width -%; Z-index:Ten; }

When it comes to selectors with fewer style attributes, I'll write a line:

/* * * The selector attribute is written in the same line as less * * */ div{background-color: #3399cc; color:#666;}

This rule is not mandatory, but no matter which one you use, my advice is to always keep the code consistent. Attributes are written in more than 3 lines, and can be written one line.

9. Select a better style attribute value

Some properties in CSS use different attribute values, although the effect is similar, when there are differences in performance, such as the difference is that border:0 set border to 0px, although on the page is not visible,

However, by border the default value, the browser still renders the Border-width/border-color, which is already occupying memory values. and Border:none set border to "none" that is not,

The browser will not render an action when parsing "none", i.e. it will not consume memory values. Therefore, it is recommended to use Border:none;

Similarly, the Display:none hidden Object Browser does not render, and does not consume memory. And the Visibility:hidden will.

10. Use <link> replace @import

First, @import is not part of the XHTML tag or Web Standard, it is not as compatible with earlier browsers and has some negative impact on the performance of the site .

11. Using an external style sheet

This principle is always a good design practice. Not only is it easier to maintain modifications, but it is more important to use external files to improve page speed because CSS files can generate caches in the browser.

The CSS built into the HTML document is re-downloaded with the HTML document in each request. Therefore, in practical applications, it is not necessary to have CSS code built into the HTML document:

<style type="text/css" >#container {...} #sidebar {..} </style>

Instead, use <link> to import an external style sheet:

<link rel="stylesheet" type="text/css " href= " Css/styles.css " />

12. Avoid using CSS expressions (expression)

CSS expressions are a powerful (but dangerous) way of dynamically setting CSS properties.

Internet Explorer supports CSS expressions starting with the 5th version. In the following example, a CSS expression can be used to switch between one-hour intervals

Background color:

Background-color:expression (new Date ()). GetHours ()%2"#B8D4FF"  "#F08A00" );

As shown above, JavaScript expressions are used in expression. CSS properties are set based on the results of the JavaScript expression calculations.

The problem with expressions is that they are calculated more frequently than we think. Not only when the page is displayed and scaled, it is recalculated when the page scrolls, or even when the mouse is moved.

Add a counter to the CSS expression to track how often the expression is calculated. Easily move the mouse in the page can be more than 10,000 times the amount of calculation.

If you must use CSS expressions, be sure to remember that they are counted thousands of times and may have an impact on the performance of your pages. Therefore, avoid using CSS expressions in the non-forced way.

13. Code Compression

When you decide to deploy a Web site project to the Web, you'll want to consider compressing the CSS, commenting out comments and spaces to make the page load faster.

Compress your code, you can use some tools, such as Yui Compressor, use it to streamline CSS code, reduce file size, for higher loading speed.