The principle of efficient and neat CSS code (i)

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:

*{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 TABLE element */

img/* img Elements Picture element */{

Border:mediumnone;

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 don't have to name a class like this in a real project, but it's also problematic to think about this code:

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

<p> I am a paragraph! </p>

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.4emarial,helvetica,sans-serif;

padding:5px010px5px;

}

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

The above is the efficient clean CSS code principle (above) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

