CSS code principles

CSS's team work rules and how to write high-performance CSS code.

One, use reset but not global reset

Unlike the default properties of browser elements, reset resets some of the default properties of the browser element to achieve browser compatibility. It is important to note, however, that you do not use global reset:

* { margin:0; padding:0; }

This is not only because it is a slow and inefficient method, but also causes some unnecessary elements to reset margins and padding. Refer to the practice of Yui Reset and Eric Meyer in this recommendation.

 html  { color :  #000 ;  background :  #FFF ;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input, TEXTAREA,P,BLOCKQUOTE,TH,TD  { margin : 0 ;  padding : 0 ;} table  { Border-collapse : collapse ;  border-spacing : 0 ;} fieldset,img  { border : 0 ;} 

...... (Quoted from YUI3-RESET.CSS:HTTP://YUI.YAHOOAPIS.COM/3.17.2/BUILD/CSSRESET/CSSRESET.CSS)

Second, a good naming habit

Good naming habits, naming meaningful, writing rules unified, the others do not have to say more.

Third, the code abbreviation

CSS code abbreviations can improve the speed at which you write your code, streamlining the amount of code you have (mostly or thinly sized). In CSS there are many attributes that can be abbreviated, including margin,padding,border,font,background and color values, if you learn the code abbreviation, the original code:

Li {font-family:Arial, Helvetica, Sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px;}

It can be abbreviated as:

Li {font: 1.2em/1.4em Arial, Helvetica, Sans-serif; padding:5px 0 10px 5px;}

Iv. using inheritance, merge writing (multiple selectors)

If multiple child elements of a parent element in a page use the same style, it is better to define their same style on their parent element and have them inherit the CSS styles. This way you can maintain your code well, and you can also reduce the amount of code. So the original code:

#container Li { font-family:Georgia, serif;} #container P { font-family:Georgia, serif;} #container H1 {font-family:Georgia, serif;}

You can simply write:

#container { font-family:Georgia, serif;}

Merge multiple CSS selectors for one if they have a common style. This is not only simple code but also saves you time and space. Such as:

H1 { font-family:Arial, Helvetica, Sans-serif; font-weight:normal; }H2{ font-family:Arial, Helvetica, Sans-serif; font-weight:normal;} H3 { font-family:Arial, Helvetica, Sans-serif; font-weight:normal; }

Can be combined into:

H1, H2, H3 { font-family:Arial, Helvetica, Sans-serif; font-weight:normal; }

V. 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: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}/*Set Font 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; }

Vi. Maintaining the readability of CSS

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:5px 0 10px 5px;width:30%;Z-index:Ten;}/** * 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:ten; }

Seven, choose 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

border:0 set border to 0px, although not visible on the page, but according to the border default value understanding, the browser still renders the Border-width/border-color, that is, the memory value has been 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.

Viii. using <link> instead of @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.

Ix. 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 external style sheets: <link rel= "stylesheet" type= "Text/css" href= "Css/styles.css"/>

X. avoiding the use of 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.

Xi. 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.

CSS code principles