Efficient clean CSS Code principle "reprint"

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, to summarize some how to achieve efficient and neat CSS code principles:

1. Use reset but not global reset

The default properties for different browser elements vary, using reset to reset some of the default properties of the browser element to achieve browser compatibility. It is important to note, however, that you do not use global reset: Anshan Hospital for treating psoriasis www.0412n.com

*{margin:0; padding:0;}

This is not only because it is a slow and inefficient method, but also causes some unnecessary elements to reset margins and padding. Refer to the practice of Yui Reset and Eric Meyer in this recommendation.

/** 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 elements */

Pre,/* text formatting elements literal format element */

form, fieldset, Legend, button, input, textarea,/* form elements table cell */

TH, TD,/* TABLE elements elements */

img/* img Elements Picture element */{

Border:medium none;

margin:0;

padding:0;

}

/** Setting the 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;}

/** Reset Hyperlink Element **/

a {text-decoration:none; color: #333;}

a:hover {text-decoration:underline; color: #F40;}

/** resetting the picture element **/

img{border:0px;}

/** Reset TABLE Element **/

Table {border-collapse:collapse; border-spacing:0;}

2. Good naming habits

No doubt a messy or no semantic naming code, who will be crazy to see. Just like this code:

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

I think even beginners will not be in the actual project so named a class, but have not thought that this code is also very problematic: Anshan Hospital for the treatment of psoriasis www.0412n.com

My name is Wiky

The problem is that if you need to change all the original red fonts to blue, then the changes will change to the style:

. Red{color:bule;}

Such a name would be confusing, and the same name would be called. Leftbar's sidebar can be cumbersome if you need to modify it to the right sidebar. Therefore, do not use the attributes of the element (color, position, 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 these classes or IDs, it does not affect the connection between them and the HTML elements.

In addition, there is a situation, some fixed style, the definition will not be modified, then you do not have to worry about the name of 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

I am a paragraph!

If you need to change this paragraph from the original left-aligned to right-aligned, then you just need to modify its classname to alignright.

3. Code Abbreviations

CSS code abbreviations can improve the speed at which you write your code and streamline your code. In CSS there are many attributes that can be abbreviated, including margin,padding,border,font,background and color values, if you learn the code abbreviation, the original code:

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. Using CSS Inheritance

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:

#container li{font-family:georgia, serif;}

#container p{font-family:georgia, serif;}

#container h1{font-family:georgia, serif;}

You can simply write:

#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 combined into:

H1, H2, h3{font-family:arial, Helvetica, Sans-serif; font-weight:normal;}

6. Appropriate code comments

Code comments can make the structure clearer by making it easier for others to read your code, and to organize code annotations appropriately. You can choose to do the start of the style sheet by adding a directory:

/*------------------------------------

1. Reset

2. Header

3. Content

4. SideBar

5. Footer

----------------------------------- */

So the structure of your code is straightforward, and you can easily find and modify the code.

The main content of the code should also be properly divided, even where necessary to comment on the code, 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;}

Efficient clean CSS Code principle "reprint"