Organize and optimize your CSS code

When we face the increasingly large css,javascript files in our web site projects, whether for two development or browser parsing, we should optimize their code, but optimization does not mean simply compressing or reducing the volume of the file. Clear, efficient operation is the result we want. So what are the tools that can be our CSS code? Let's take a look at some of the suggestions below.

1. Use abbreviations

Abbreviation can shorten your working time, reduce your file volume, why not?

Set different values for similar differences:

view plaincopy to clipboardprint?
p {　
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

Use abbreviations:

view plaincopy to clipboardprint?
p { margin: 10px 20px 30px 40px; }
p { margin: 10px 20px 30px 40px; }

Take a look at the abbreviations used in the font.

View CSS Shorthand Guide (English) and efficient CSS with shorthand properties for more information about abbreviations.

2. Avoid using hack

Jon Hick's Blog hicksdesign.co.uk/journal the use of browser conditional annotations

Hack is a bad thing, it will be for different browsers to define the same code, making CSS cumbersome. Now we know that using conditional annotations instead of hack, they are recognized in IE6 and IE7, and even the IE team recommends it. Use conditional comments to service CSS code that is specific to browser features, so smaller, core CSS code is used to service compliant browsers, and only when the requirements are present (IE) will they download additional CSS files!

Here's a look at IE6 's code example using conditional annotations:

view plaincopy to clipboardprint?
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->

This code allows IE6 to download additional ie6.css to parse its proprietary CSS code. Similarly, if you're going to replace the top 6 with 7 for IE7, just do it.