CSS Writing Specifications

CSS writing specification "Go"

1. The default properties of different browser elements vary, using reset resets some of the default properties of the browser element to achieve browser compatibility. /** clear inner margin **/body, H1, H2, H3, H4, H5, H6, HR, P, blockquote,/* Structural elements structural elements */dl, DT, DD, UL, OL, Li,/* List elements Element */pre,/* text formatting elements literal format element */form, fieldset, Legend, button, input, textarea,/* form E Lements table cell */TH, TD,/* Table elements TABLE element */img/* img Elements Picture Element */{border:medium none; margin:0; padding:0; }/** Set default font **/body,button, input, select, textarea {font:12px/1.5 ' Arial ', Tahoma, Srial, Helvetica, Sans-serif;} H1, H2, H3, H4, H5, h6 {font-size:100%;} em{font-style:normal;}/** Reset list element **/ul, ol {list-style:none;}/** Reset hyperlink element **/a { Text-decoration:none; Color: #333;} a:hover {text-decoration:underline; color: #F40;}/** resets the picture element **/img{border:0px;}/** reset Table element **/Table {Border-collapse : Collapse; border-spacing:0; }

2. Good naming habits

3. Code abbreviation li{font-family:arial, Helvetica, Sans-serif; font-size:1.2em; line-height:1.4em; padding-top:5px; Padding-bott om:10px; padding-left:5px; } becomes li{Font:1.2em/1.4em Arial, Helvetica, Sans-serif; padding:5px 0 10px 5px;}

4. Using CSS inheritance if multiple child elements of a parent element in a page use the same style, it is best to define their same style on their parent element to 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-fam Ily:georgia, serif; } #container {font-family:georgia, serif;}

5. Using multiple selectors you can combine 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 merged into H1, H2, h3{font-family:arial, Helvetica, sans -serif; Font-weight:normal; }

6. Appropriate code comments

7. Sort your CSS code if the attributes in your code can be sorted alphabetically, it will be quicker to find the changes:

/*** 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; } 9. Choose better Style property values 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 not visible on the page, but according to border default value understanding, The browser still renders the Border-width/border-color, which is already occupying the memory value. 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. Using <link> instead of @import first, @import is not part of the XHTML tag or Web Standard, it is not compatible with earlier browsers and has some negative impact on the performance of the site. Refer to "High-performance Web design: Do not use @import". Therefore, please avoid using @import

11. The principle of using an external style sheet 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:

12. Avoiding the use of CSS expressions (expression) CSS expressions is a powerful (but dangerous) way to dynamically set CSS properties.

13. Code compression when you decide to deploy the Web site project to the Web, you'll want to consider compressing the CSS, commenting and spaces to make the page load faster. Compress your code, you can use some tools, such as Yui Compressor use it to streamline CSS code, reduce file size, for higher loading speed

The above is the content of the CSS writing specifications, more relevant articles please pay attention to topic.alibabacloud.com (www.php.cn)!

