CSS code specification issues are important to several

<span id="Label3"></p>Many people will encounter a lot of difficulties when they first come into contact, and the standard writing format is more obvious; today brings you some knowledge of CSS code Specifications.<br>1. Good naming conventions<br>The ID and class names are as short as possible and conform to Semantics. Multiple words are spliced with '-' symbolic links, using lowercase letters as much as Possible.<br>2. Code Abbreviations<br>CSS code abbreviations can improve the speed at which you write your code and streamline your Code.<br>li{font-family:arial, Helvetica, sans-serif;<br>font-size:1.2em;<br>line-height:1.4em;<br>padding-top:5px;<br>padding-bottom:10px;<br>padding-left:5px;<br>}<br>can be abbreviated as<br>li{<br>Font:1.2em/1.4em Arial, Helvetica, sans-serif;<br>padding:5px 0 10px 5px;<br>}<br>3. Use reset but not global reset<br>Global reset is not just because it is a slow and inefficient method, but also causes some unnecessary elements to reset margins and padding.<br>*{margin:0; padding:0;}<br>4. Using CSS Inheritance<br>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:<br>#container li{font-family:georgia, serif;}<br>#container p{font-family:georgia, serif;}<br>#container h1{font-family:georgia, serif;}<br>You can simply write:<br>#container {font-family:georgia, serif;}<br>5. Using multiple selectors<br>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:<br>h1{font-family:arial, Helvetica, sans-serif; font-weight:normal;}<br>h2{font-family:arial, Helvetica, sans-serif; font-weight:normal;}<br>h3{font-family:arial, Helvetica, sans-serif; font-weight:normal;}<br>can be combined into<br>h1, h2, h3{font-family:arial, Helvetica, sans-serif; font-weight:normal;}<br>6. Appropriate code comments<br>Code comments can make the structure clearer by making it easier for others to read your code, and to organize code annotations Appropriately.<br>7. Sort your CSS code<br>If the attributes in your code can be sorted alphabetically, it can be quicker to find the Changes.<br>/*** Style Properties Alphabetically ***/<br>div{<br>Background-color: #3399cc;<br>Color: #666;<br>Font:1.2em/1.4em Arial, Helvetica, sans-serif;<br>height:300px;<br>margin:10px 5px;<br>padding:5px 0 10px 5px;<br>width:30%;<br>z-index:10;<br>}<br>8. Keep the CSS readable<br>Writing a readable CSS will make it easier to find and modify Styles.<br>/*** Write one line per style property ***/<br>div{<br>Background-color: #3399cc;<br>Color: #666;<br>Font:1.2em/1.4em Arial, Helvetica, sans-serif;<br>height:300px;<br>margin:10px 5px;<br>padding:5px 0 10px 5px;<br>width:30%;<br>z-index:10;<br>}<br>/*** all style attributes are written on the same line ***/<br>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; }<br>9. Select a better style attribute value<br>Some properties in CSS use different attribute values, Although the effect is similar, when there are differences in performance, such as:<br>The difference is that border:0 set border to 0px, although it is not visible on the page, but according to the border default value, the browser still renders the border-width/border-color, that is, the memory value is already occupied.<br>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. 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.<br>10.<link> instead of @import<br>@import is not an XHTML tag or part of a web standard, it is less compatible with older browsers and has some negative impact on the performance of the Site. therefore, please avoid using @import<br>11. Using an external style sheet<br>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 put CSS code inside the HTML Document.<br>12. Code Compression<br>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.<br>13. Avoid using CSS hack<br>14. Code Format<br>(1) a semicolon is used after each CSS property declaration, even the last One.<br>(2) use a space after the colon immediately following the property Name.<br>(3) each CSS selector or attribute declaration will have a new row.<br>(4) There should be a blank line between each CSS Rule.<br>15. If the value of the CSS property is 0, do not bring the unit Back. Unless it's really needed.<br>Recommended CSS Video Tutorials:<br>HTML+CSS Basic Primer (completed) http://www.maiziedu.com/course/web/421-5342/<br>HTML5+CSS3 QuickStart (ended) http://www.maiziedu.com/course/web/228-2627/<p><p>CSS code specification issues are important to several</p></p></span>