Efficient neat CSS Code principles

Core tips: 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

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.

/** clears the inner and outer margin **/
Body, H1, H2, H3, H4, H5, H6, HR, p,
BLOCKQUOTE,/* Structural elements structural elements * *
DL, DT, DD, UL, OL, Li,/* list elements elements *
Pre,//formatting elements Text Format element * *
form, fieldset, Legend, button, input, textarea,/* form elements table cell
TH, TD,/* Table elements form elements * *
img/* img Elements Picture element */{
Border:medium none;
margin:0;
padding:0;
}
/** Set Default Font **/
Body,button, input, select, textarea {
font:12px/1.5 ' song 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;}
/** to reset a hyperlink element **/
a {text-decoration:none; color: #333;}
a:hover {text-decoration:underline; color: #F40;}
/** Reset Picture Elements **/
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;
}

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 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;}

1 2 Next page > full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] Next page