Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the principles of efficient and tidy CSS code, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

1. Appropriate code comments

Code comments can make it easier for others to understand your code, and reasonably organize code comments to make the structure clearer. You can choose to add catalogs at the beginning of the stylesheet:

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

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

As for the main content of the code, it should be divided appropriately, and even comment on the code where necessary, which is also beneficial to the team development:

/ * Header * / # header {height:145px; position:relative;} # header H1 {width:324px; margin:45px 00 20px; 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 .font {overflow:hidden {margin-bottom:20px; border-bottom:1px solid # f3f3f3; position:relative; overflow:hidden;} / * * Footer * * / # footer {clear:both; padding:50px 5px 0; overflow:hidden;} # footer h4 {color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em;}

two。 Sort your CSS code

If all the attributes in the code can be sorted alphabetically, you can find and modify them more quickly:

/ * style attributes are sorted alphabetically * * / 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%; Zmuri index10;}

3. Keep CSS readable

Writing readable CSS will make it easier to find and modify styles. For the following two cases, which is more readable, I think it is self-evident.

/ * each style attribute is written on one line * * / 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%; Zmuri index 10;} / * all style attributes are written on the same line * * / 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%; Zmuri indexVl10;}

For selectors with fewer style attributes, I write to one line:

/ * selector attributes are rarely written on the same line * * / div {background-color:#3399cc; color:#666;}

This rule is not mandatory, but no matter which way you write it, my advice is to always keep the code consistent. The branch with more attributes can be written, and less than 3 attributes can be written on one line.

4. Select a better style attribute value

Some attributes in CSS use different attribute values, although the effect is similar, but 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, it has taken up memory value. While border:none sets border to "none", the browser will not render when parsing "none", that is, it will not consume memory values. So it is recommended to use border:none

Similarly, the display:none Hidden object browser does not render and takes up no memory. And visibility:hidden will.

5. Use instead of @ import

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

6. Use external style sheets

This principle is always a good design practice. Not only can it be easier to maintain changes, but more importantly, using external files can improve page speed, because CSS files can generate caches in browsers. The CSS built into the HTML document is re-downloaded with the HTML document on each request. Therefore, in practical application, it is not necessary to build CSS code into the HTML document:

# container {.. } # sidebar {.. }

Instead, you use to import an external style sheet:

7. Avoid using CSS expressions (Expression)

CSS expressions are a powerful (but dangerous) way to set the CSS property dynamically. Internet Explorer has supported CSS expressions since version 5. In the following example, you can use the CSS expression to switch the background color every other hour:

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

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

The problem with expressions is that they are calculated more frequently than we think. It will be recalculated not only when the page is displayed and zoomed, but also when the page scrolls or even moves the mouse. Add a counter to the CSS expression to track how often the expression is evaluated. You can easily reach more than 10000 calculations by moving the mouse on the page.

If you have to use CSS expressions, keep in mind that they have to be evaluated thousands of times and may affect the performance of your page. So avoid using CSS expressions as a last resort.

8. Code compression

When you decide to deploy a website project to the web, you should consider compressing the CSS, leaving comments and spaces to make the page load faster. To compress your code, you can use tools such as YUI Compressor, which can be used to simplify CSS code and reduce file size for higher loading speed.

After reading the above, do you have any further understanding of the principles of efficient and clean CSS code? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.