[Summary] CSS Code principles for efficient and clean operations

CSS is not difficult to learn, but it becomes difficult to manage in large projects. In particular, different people have slightly different CSS writing styles, making it even harder to communicate with teams, to this end, we have summarized some CSS Code principles on how to implement efficient and clean code:

 

1. Use Reset, but not global Reset

The default attributes of different browser elements are different. You can use Reset to Reset some default attributes of browser elements to achieve browser compatibility. However, do not use global Reset:

*{ margin:0; padding:0; }

This is not only because it is a slow and inefficient method, but also causes unnecessary elements to reset the outer and inner margins. We recommend that you refer to YUI Reset and Eric Meyer. In my opinion, like Eric Meyer, Reset is not static. You also need to modify the Reset according to different project requirements to achieve browser compatibility and ease of operation. The Reset I used is as follows:

 

/** Clear internal and external margins **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements structure element */dl, dt, dd, ul, ol, li,/* list elements */pre,/* text formatting elements text format elements */form, fieldset, legend, button, input, textarea,/* form elements form Element */th, td,/* table elements table element */img/* img elements Image Element */{border: medium none; margin: 0; padding: 0;}/** set default font **/body, button, input, select, textarea {font: 12px/1.5 'body', 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;}/** reset image elements **/img {border: 0px ;} /** reset table element **/table {border-collapse: collapse; border-spacing: 0 ;}

 

2Good naming conventions

No doubt, the code is messy or the code for naming without definition. Anyone who looks at it will be crazy. Code like this:

.aaabb{margin:2px;color:red;}

I don't think that even a beginner will name a class like this in a real project, but it is also very problematic to think about such code:

The problem is that if you need to change all the original red fonts to blue, the style will change:
.red{color:bule;}
This naming will be confusing. It will be troublesome to change the sidebar named. leftBar to the right. Therefore, do not use the element features (color, location, size, and so on) to name a class or id. You can select the name of the meaning, for example, # navigation {...},. sidebar {...},. postwrap {...}
In this way, no matter how you modify the styles that define these classes or IDs, the relationship between them and HTML elements is not affected.
There is also a situation where some fixed styles won't be modified after definition, so you don't have to worry about the situation you just mentioned when naming, such
.alignleft{float:left;margin-right:20px;}.alignright{float:right;text-align:right;margin-left:20px;}.clear{clear:both;text-indent:-9999px;}
For such a paragraph
<P class = "alignleft"> I am a paragraph! </P>
If you need to change the section from the original left-aligned to the right-aligned section, you only need to change its className to alignright.
 
3. Code abbreviation
CSS code abbreviations can speed up code writing and streamline the amount of your code. There are many attributes that can be abbreviated in CSS, including margin, padding, border, font, background, and color value. If you have learned the abbreviation of code, the original code is as follows:
 
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:
li{    font: 1.2em/1.4em Arial, Helvetica, sans-serif;    padding:5px 0 10px 5px;}
.
 
4. Use CSS inheritance
If multiple child elements of the parent element on the page use the same style, it is best to define the same style on the parent element and let them inherit these CSS styles. In this way, you can maintain your code and reduce the amount of code. The Code is as follows:
#container li{ font-family:Georgia, serif; }#container p{ font-family:Georgia, serif; }#container h1{font-family:Georgia, serif; }
It can be abbreviated:
#container{ font-family:Georgia, serif; }
 
5. Use multiple Selector
You can merge multiple CSS selectors into one, if they have a common style. In this way, the code is concise and saves you time and space. For example:
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
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
 
6. Proper code comments
Code comments make it easier for others to understand your code and organize code comments reasonably to make the structure clearer. You can choose to add a directory at the beginning of the style sheet:
/*------------------------------------    1. Reset    2. Header    3. Content    4. SideBar    5. Footer  ----------------------------------- */
In this way, you can easily find and modify the code structure.
The main content of the Code should also be properly divided, and the code should be annotated and explained where necessary, which is also conducive to team development:
/*** Header ***/# header {height: 145px; position: relative;} # header h1 {width: 324px; margin: 45px 0 0 0 20px; float: left; height: 72px;}/*** Content ***/# content {background: # fff; width: pixel; float: left; min-height: 600px; overflow: hidden ;}# content h1 {color: # F00}/* set the 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 ;}
 
7. Sort your CSS code
If all the attributes in the code can be sorted by letters, the search and modification will be faster:
/*** Sort style attributes 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 ;}
 
8. Keep CSS readable
Writing readable CSS makes it easier to search for and modify styles. In either of the following situations, which one is more readable.
/*** Write a row 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 ;} /*** write all style attributes in 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 ;}
When there are some selectors with fewer style attributes, I will write a line:
 
/*** The selector attribute is rarely written in the same line ***/div {background-color: # 3399cc; color: #666 ;}
 
This rule is not a hard rule, But no matter which method you use, I suggest always keep the Code consistent. Multiple branch writes with more than three attributes can be written into one row.
 
9. Select a better style property value
Some attributes in CSS use different attribute values. Although the effect is similar, there are differences in performance, such
The difference is that border: 0 sets border to 0px. Although it cannot be seen on the page, the browser still renders border-width/border-color according to the default value of border, that is, the memory occupied.
While border: none sets border to "none", that is, none. When the browser parses "none", no rendering action is made, that is, no memory value is consumed. Therefore, we recommend using border: none;
Similarly, display: none hides the object. The browser does not render the object and does not occupy memory. Visibility: hidden.
 
10. Replace @ import with <link>.
First, @ import is neither an XHTML tag nor a part of the Web standard. It is not highly compatible with earlier browsers and has some negative impact on website performance. For details, refer to high-performance website design: Do not use @ import. Therefore, avoid using @ import
 
11. Use an external style sheet
This principle is always a good design practice. It is not only easier to maintain and modify, but more importantly, it can improve the page speed by using external files, because CSS files can generate cache in the browser. CSS built in the HTML document will be re-downloaded with the HTML document in each request. Therefore, in actual application, there is no need to build CSS code into HTML documents:
<Style type = "text/css"> # container {..} # sidebar {..} </style> or <li style = "font-family: Arial, helvetica, sans-serif; color: #666;">
Instead, use <link> to import an external style sheet:
<link rel="stylesheet" type="text/css" href="css/styles.css" />
 
12. Avoid using CSS expressions (expressions)
CSS expressions are powerful but dangerous methods to dynamically set CSS attributes. Internet Explorer supports CSS expressions since version 5th. In the following example, you can use a CSS expression to change the background color every hour:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
As shown above, expression uses a JavaScript expression. The CSS attribute is set based on the calculation result of the JavaScript expression.
The problem with expressions is that they are computed more frequently than we think. Not only when the page is displayed and scaled, but when the page is scrolling or even moving the mouse, it is re-computed. Add a counter to the CSS expression to track the computing frequency of the expression. You can easily move the mouse over 10000 times on the page.
If you must use CSS expressions, remember that they must be calculated thousands of times and may affect the performance of your page. Therefore, do not use CSS expressions unless you have.
 
13. Code Compression
When you decide to deploy the website project on the network, you need to compress the CSS, comment out the comments and spaces to make the webpage Load faster. To compress your code, you can use some tools, such as YUI Compressor.
It can be used to streamline CSS code and reduce the file size for higher loading speed.
 
14. Summary
In this article, I try to give a more detailed summary of the principle of writing more efficient CSS code, but in view of my knowledge and limited energy, I still hope that these principles can help you better write and manage your CSS code. I wonder how you write CSS. Do you have some tips to share? Leave a message for me. Thank you ~
Address: http://www.cnblogs.com/wiky/articles/better-css-code.html
PS: This article consistsVicTo sum up, please indicate the source if any reprint is available. Thank you!
 
References:
WRITE BETTER CSS WITH BEST PRACTICES
10 Tips for Writing Better CSS
5 Ways to Instantly Write Better CSS