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:

/*————————————
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
———————————– */

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:45px0020px;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:1pxsolid#f3f3f3;position:relative;overflow:hidden;}

/*** Footer ***/

#footer {Clear:both;padding:50px5px0;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 Alphabetically ***/

div{

Background-color: #3399cc;

Color: #666;

Font:1.2em/1.4emarial,helvetica,sans-serif;

height:300px;

margin:10px5px;

padding:5px010px5px;

width:30%;

Z-index:10;

}

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 property ***/

div{

Background-color: #3399cc;

Color: #666;

Font:1.2em/1.4emarial,helvetica,sans-serif;

height:300px;

margin:10px5px;

padding:5px010px5px;

width:30%;

Z-index:10;

}

/*** all style attributes are written on the same line ***/

Div{background-color: #3399cc; color: #666; font:1.2em/1.4emarial,helvetica,sans-serif;height:300px;margin:10px5px ;p adding:5px010px5px;width:30%;z-index:10; }

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

/*** selector attributes are written on the same line ***/

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 it is not visible on the page, but according to the border default value, the browser still renders the Border-width/border-color, that is, the memory value is already occupied.
and Border:none set border to "none" that is not, the browser to resolve "None" will not make a rendering action, that is, 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:

<linkrel= "stylesheet" type= "Text/css" href= "http://www.php1.cn/" >

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 the background color at one-hour intervals:

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 the CSS code, reduce file size, to achieve higher loading speed.

The above is the efficient clean CSS code principle (below) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

