Organize and optimize CSS code

1. Use abbreviations

If you still don't know the shorthand yet, you will be out of date again. Fortunately, it is not very difficult to learn it. Using abbreviations is the easiest way to reduce code. There is no time to take a look at what is more appropriate than the practice code shorthand. Let's take a look.

Attributes such as margin, border, padding, background, Font, list-style, and outline can be abbreviated. CSS short form means no longer using different declarations with similar properties...

P {margin-top: 10px;
Margin-Right: 20px;
Margin-bottom: 30px;
Margin-left: 40px ;}

You can abbreviated them as follows:

P {margin: 10px 20px 30px 40px ;}

The browser can interpret the CSS code defined by different number of attribute values. See the illustration:

The abbreviated illustration above shows that different abbreviations can be performed based on different attribute values. This method is also applicable to the padding and border-width attributes.

The abbreviation of font is very helpful for narrowing down the amount of code and allows you to write less letters ;)

A simplified font example. Note: If a property value is not defined, the sub-level element is defined or the default value is used.

If you are familiar with the abbreviated method above, you can also take a look at the short tutorial (English), which may be helpful to you. 2. Avoid using hack

Hack is a bad thing. It defines the same code for different browsers, making CSS redundant. Now we know that conditional annotations are used to replace hack. They are recognized in IE6 and IE7, and even recommended by the IE team.Conditional commentsIt serves specialized CSS code that meets browser features. Therefore, smaller and core CSS code is used to serve standard-compliant browsers only when requirements are met (such as IE ), to download additional CSS files!

Let's take a look at the code example of IE6 using conditional Annotations:

<! -[If IE 6]>
<LINK rel = "stylesheet" type = "text/CSS" href=”ie6.css "mce_href=”ie6.css">
<! [Endif]->

This Code enables ie6to download ie6.css to parse its specialized CSS code. Similarly, for IE7, you only need to replace the above 6 and 7.

3. Use white space

CSS should be well maintained for both self-reading and secondary development.ReadabilityThe white space serves as a key role.

We do not encourage you to remove all blank formats, such as tab, line feed, and space, to get a smaller CSS file. It is recommended that the nested Code use a tab indent. All attributes are independent of one row.

Which of the two CSS writing formats in the comparison can help you save more time for reading and modifying?The effect of white space is obvious, which makes it easier for you to manage code.

4. Remove unnecessary structures (frameworks) and reset (resets)

If you choose to use the css framework, including those you write, if you check the code, you will find that some rules contained in the framework do not apply to your current files, and they can be deleted.

We can also think of Reset. The reset and Eric Meyer reset (reset) used by Yui grid CSS are currently popular. resets can remove the default styles of different browsers, make the page behave in the same way across different browsers. However, they usually contain all the attributes required by a large website, such as <PRE>, <code>, <sub>, <dfn>, <var> and other attributes are not used by common websites at all. delete those that you cannot use. Eric Meyer will encourage you to do the same!

Framework and reset will help you with your work, but if you don't remove those you can't use, it will drag down the efficiency and readability of your page.