·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 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.
The main content of the code should also be properly divided, and even the code should be annotated where necessary, which is also conducive to team development:
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#Content h1 {color: # F00}/* Setting typeface Color*/
#content .posts{ overflow:hidden; }
#content .recent{ 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; }
·Sort your CSS code
If the attributes in the code can be sorted alphabetically, the search and modification can be faster:
/***Style properties 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%;
z-index:10;
}
·Keep the readability of CSS
Writing readable CSS will make it easier to find and modify styles. For the following two cases, which is more readable, I want to make it clear.
/***Write one line for each style attribute***/
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;
}
/***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%; z-index:10; }
For selectors with fewer style attributes, I will write a line:
/***Few selector properties are written on the same line***/
div{ background-color:#3399cc; color:#666;}
This rule is not mandatory, but my advice is to always keep the code consistent no matter which writing method you use. If there are more attributes, write them in separate lines. If there are less than 3 attributes, write one line.
·Choose better style attribute values
Some attributes in CSS use different attribute values. Although the results are similar, there are differences in performance, such as
The difference is that border: 0 sets border as 0px. Although it is invisible on the page, it is understood by the default value of border, browser The border width/border color is still rendered, that is, the memory value has been used.
While border: none sets border to "none", which means none. When the browser parses "none", it will not render, which means no memory value will be consumed. Therefore, it is recommended to use border: none;
Similarly, the display: none hidden object browser does not render and occupies no memory. Visibility: hidden will.
·Use<link>instead of @ import
First@ Import is not part of XHTML tags or Web standards Browser compatible It is also not high, and has some negative effects on the performance of the website.
·Use External Style Sheets
This principle is always a good design practice. It is not only easier to maintain and modify, but also more important to use external files to improve page speed, because CSS files can generate cache in the browser. The CSS built into the HTML document will be re downloaded with the HTML document in each request. Therefore, in practical applications, it is unnecessary to build CSS code into HTML documents:
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
Instead, use<link>to import external style sheets:< link rel="stylesheet" type="text/css" href="css/styles.css" />
·Avoid using CSS expressions
CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically. Internet Explorer has supported CSS expressions since the fifth version. In the following example, CSS expressions can be used to switch the background color every hour:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
As shown above, JavaScript expressions are used in expression. CSS properties are set according to the calculation results of JavaScript expressions.
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 is scrolled, or even when the mouse is moved. Add a counter to the CSS expression to track the calculation frequency of the expression. You can easily achieve more than 10000 calculations by simply moving the mouse on the page.
If you must use CSS expressions, remember that they need to be evaluated thousands of times and may affect the performance of your page. Therefore, if necessary, please avoid using CSS expressions.
·Code compression
When you decide to deploy a website project to the network, you should consider compressing CSS, removing comments and spaces, so that the page can load faster. To compress your code, you can use some tools, such as YUI Compressor, which can simplify CSS code and reduce file size to achieve higher loading speed.
