Principles of efficient and clean CSS code (Part 2)

6. Appropriate code comments

Code comments can make it easier for others to understand your code, and reasonable organization of code comments can make the structure clearer. You can choose to add a directory at the beginning of the style sheet:

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

This way the structure of your code is clear at a glance, and you can easily find and modify the code.

The main content of the code should also be divided appropriately, and the code should even be commented where necessary. This 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 properties in the code can be sorted alphabetically, it will be faster to find and modify:

/*** Style properties are sorted alphabetically ***/

div{

background-color:#3399cc;

color:#666;

font:1.2em/1.4emArial,Helvetica,sans-serif;

height:300px;

margin:10px5px;

padding:5px01 0px5px;

width:30%;

z-index:10;

}

8. Keep CSS readable

Writing readable CSS will make it easier to find and modify styles. I think it's self-explanatory which of the following two cases is more readable.

/*** Write one line for each style attribute ***/

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;padding:5px010px5px;width:30%;z-index:10; }

When it comes to some selectors with fewer style attributes, I will write a line:

/*** Selector attributes with fewer attributes are written on the same line ***/

div{background-color:#3399cc;color:#666;}

This rule is not hard and fast, but no matter which way you write it, my advice is to always keep the code consistent. If there are many attributes, write them in separate lines. If there are less than 3 attributes, you can write one line.

9. Choose better style attribute values ​​

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

The difference is that border:0 sets border to 0px , although it is not visible on the page, but according to the default value of border, the browser still renders border-width/border-color, that is, the memory value has been occupied.
And border:none sets the border to "none", which means there is no border. When the browser parses "none", it will not perform rendering actions, that is, it will not consume memory values. Therefore, it is recommended to use border:none;

Similarly, display:none hides the object browser without rendering and does not occupy memory. And visibility:hidden will.

10. Use instead of @import

First of all, @import does not belong to the XHTML tag and is not part of the Web standard. It is not very compatible with earlier browsers and has certain effects on the performance of the website. negative influence.

11. Use external style sheets

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

Instead use to import an external style sheet:

12. Avoid using CSS expressions (Expression)

CSS expressions are a powerful (but dangerous) way to dynamically set CSS properties. Internet Explorer supports CSS expressions starting with version 5. In the following example, you can use CSS expressions to switch the background color every hour:

background-color: expression( (new Date()).getHours()%2?"#B8D4FF":"#F08A00") ;

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

The problem with expressions is that they are evaluated more often than we think. Not only when the page is displayed and zoomed, but also when the page is scrolled and even when the mouse is moved, it will be recalculated. Add a counter to a CSS expression to track how often the expression is evaluated. You can easily achieve more than 10,000 calculations by simply moving the mouse on the page.

If you must use CSS expressions, be sure to remember that they are evaluated thousands of times and may have an impact on the performance of your page. So, avoid using CSS expressions unless absolutely necessary.

13. Code Compression

When you decide to deploy your website project to the Internet, you must consider compressing the CSS to remove comments and spaces to make the web page load faster. To compress your code, you can use tools such as YUI Compressor, which can streamline CSS code and reduce file size for higher loading speeds.

The above is the content of efficient and clean CSS code principles (Part 2). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!