Efficient Neat CSS Code

CSS is not difficult to learn, but in large projects, it becomes difficult to manage, especially the different people in the CSS writing style slightly different, the team is more difficult to communicate, this summed up some how to achieve efficient and neat CSS code principles:

1. Use reset but not global reset

The default properties for different browser elements are different, and using reset resets some of the browser element's default properties to achieve browser compatibility. Note, however, that you should not use the global reset:

*{margin:0; padding:0;}

This is not just because it is a slow and inefficient method, but it also causes unnecessary elements to reset the outer and inner margins. In this recommendation to refer to Yui Reset and Eric Meyer practice. I have the same view as Eric Meyer, reset is not the same, but also needs to be tailored to the different needs of the project to make appropriate changes to achieve browser compatibility and operational convenience. I use the reset as follows:

/** clears the interior from the **/body
, H1, H2, H3, H4, H5, H6, HR, P, blockquote,/
* Structural elements structural elements */
DL, DT, DD, UL, OL, Li,/* list elements elements/
Pre,/* text formatting elements format element/
form, fieldset, Legend, button, input , textarea,/* form elements TABLE element/
th, TD,/* Table elements form elements/
img/* img Elements image elements */{
  Um 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;}
/** to reset the picture element **/
img{border:0px;
/** Reset Table element **/
Table {border-collapse:collapse; border-spacing:0;}

2. Good naming habits

There is no doubt that messy or semantically-named code, who will be crazy to see. It's like this code:

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

I don't think that even a beginner would have named a class like that in a real project, but have you ever thought that the code is also problematic:

 
The problem is that if you need to change all the original red fonts to blue, the changes will change to the style:
 
. Red{color:bule;}
 
This is a very confusing name, and the same name for the. Leftbar Sidebar can be cumbersome if you need to modify it to the right sidebar. Therefore, do not use the attributes of the element (color, location, size, etc.) to name a class or ID, you can choose the meaning of the name such as: #navigation {...}},.sidebar{...},.postwrap{...}
 
This way, no matter how you modify the style that defines the class or ID, it does not affect the connection to the HTML element.
 
There is also a situation, some fixed style, the definition will not be modified, then you do not have to worry about naming the situation just said, such as
 
. alignleft{float:left;margin-right:20px;
alignright{float:right;text-align:right;margin-left:20px}
. clear{clear:both;text-indent:-9999px;}
 
So for such a paragraph
 
<p class= "AlignLeft" > I am a paragraph! </p>
 
If you need to change this paragraph from the original left alignment to the right alignment, then just modify its classname for alignright.
 
 
3. Code abbreviation
 
CSS code abbreviations can increase the speed at which you write code and streamline your code. In CSS there are many properties that can be abbreviated, including margin,padding,border,font,background and color values, and so on, if you learned the code abbreviation, the original code such as:
 
 
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;
}
 
If you want to learn more about how these attributes are abbreviated, you can refer to the common CSS abbreviation syntax summary or download css-shorthand-cheat-sheet.pdf.
 
 
4. Use CSS to inherit
 
If multiple child elements of a parent element in a page use the same style, it is best to define their same styles on their parent elements so that they inherit these CSS styles. This allows you to maintain your code well and reduce the amount of code. So the code would have been like this:
 
#container li{font-family:georgia, serif;}
#container p{font-family:georgia, serif;}
#container h1{font-family:georgia, serif;}
 
Can be written by Jane:
 
#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
 
Code annotations make the structure clearer by making it easier for others to read your code and properly organize code comments. You can choose to do the start of the stylesheet to add a table of contents:
 
/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  -----------------------------------* *
 
So the structure of your code at a glance, you can easily find and modify the code.
 
The main content of the code should also be properly divided, even in the necessary place in the code to annotate the description, 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;}
 
 
7. Sort the CSS code for you
 
If the attributes in your code are sorted alphabetically, the search for changes can be faster:
 
/*** style properties are 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;
}
 
 
8. Keep 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 think it is clear.
 
/*** each style property write a row ***/
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;< c27/>height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; Z-index:10; }
 
When it comes to selectors with fewer style attributes, I write to one line:
 
 
/*** selector attributes are less written on the same line ***/
div{background-color: #3399cc; color: #666;}
 
 
This rule is not mandatory, but regardless of which method you use, my advice is to always keep the code consistent. property is written in more than 3 properties and can write one line.
 
 
9. Choose a better style attribute value
 
Some attributes in CSS use different property values, although the effect is similar, when the performance of the difference, such as
 
The difference is that border:0 border set to 0px, although not visible on the page, but by the border default value, the browser still renders Border-width/border-color, that is, the memory value has been consumed.
and Border:none border set to "none" that is not, the browser resolves "none" will not render action, that is, does not consume memory values. Therefore, it is recommended to use Border:none;
 
Similarly, the Display:none hidden Object Browser is not rendered and consumes no memory. and Visibility:hidden will.
 
 
use <link> instead of @import
 
First, @import is not an XHTML label or part of a Web standard, it is less compatible with earlier browsers, and has some negative impact on the performance of the site. Specific reference to the "High-performance Web design: Do not use @import." So, please avoid using @import
 
 
one. Use an external style sheet
 
This principle is always a good design practice. Not only is it easier to maintain changes, but more importantly, using external files can improve page speed because CSS files can generate caching in the browser. CSS built into HTML documents will be downloaded in each request with an HTML document. Therefore, in practical applications, there is no need to put CSS code in the HTML document:
 
<style type= "Text/css" >
    #container {.}
    #sidebar {..}
</style>

<li style= "font-family:arial, Helvetica, Sans-serif; color: #666; ">
 
Instead, use <link> to import external style sheets:
 
<link rel= "stylesheet" type= "Text/css" href= "Css/styles.css"/>
 
 
Avoid using CSS expressions (Expression)
 
CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically. Internet Explorer supports CSS expressions starting with the 5th version. In the following example, you can use a CSS expression to switch the background color once every one hours:
 
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's calculations.
 
The problem with an expression is that it is more computationally frequent than we think. Not only when the page is displayed and scaled, but when the page scrolls or even moves the mouse, it is recalculated. Add a counter to the CSS expression to track how often the expression is calculated. Moving the mouse around on the page can easily reach 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 page. So, when you do not have to, avoid using CSS expressions.
 
 
Code Compression
 
When you decide to deploy your Web site project to the Web, you should consider compressing the CSS, leaving notes and spaces so that the page loads faster. Compress your code, you can use some tools, such as Yui compressor
 
It can be used to streamline CSS code, reduce file size, and get a higher load speed.