When we face the increasingly large css and javascript files in website projects, whether for secondary development or browser parsing, their codes should be optimized, but optimization does not mean simply compressing or reducing the file size. Clear organization and high operational efficiency are the results we want. So what methods are there to improve our css code? Let’s take a look at some suggestions below.
1. Using
abbreviations can shorten your working time and reduce the size of your files. 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; }
Let’s take a look at the abbreviations of commonly used fonts
Check out the CSS Shorthand Guide (English) and Efficient CSS with shorthand properties (English) to learn more about shorthand properties.
2. Avoid using Hacks
Jon Hick's blog hicksdesign.co.uk/journal Using browser conditional comments
Hack is a bad thing, it will define the same code for different browsers, making CSS cumbersome. Now we know to use conditional comments instead of hacks, they are accepted in IE6 and IE7, and even the IE team recommends their use. Use conditional comments to serve CSS code that is specific to browser features. Therefore, smaller, core CSS code is used to serve browsers that comply with standards. It will only be downloaded when the required conditions occur (such as IE). Additional CSS files!
Let’s take a look at a code example using conditional comments in IE6:
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 causes IE6 to download additional ie6.css to parse its dedicated css code. Similarly, if you are targeting IE7, just replace 6 and 7 above.
3. Use white space.
Whether it is for your own reading or secondary development, you must maintain good readability of CSS. White space plays a key role.
We don't encourage you to remove all whitespace formatting, such as tabs, line breaks, spaces, etc., in order to get a smaller CSS file. It is recommended that nested code be indented with a tab, and all attributes should be on a separate line.
Comparing the pictures above and below, which format can help you save more time on modifications? White space will make it easier for you to manage your code.
4. Remove redundant frameworks and resets
Reset rules used by Nathan Smith's 960 Grid System CSS framework
If you choose to use a CSS framework, including one you wrote yourself, if you check the code you will definitely find that some of the rules contained in the framework do not apply to your current file. can be deleted.
What can be thought of is reset. The reset used by YUI Grid CSS and Eric Meyer's Reset are currently very popular. Resets can remove the default styles of different browsers so that the page behaves consistently across browsers. But they usually contain all the attributes needed by a large website. Some attributes such as pre, code, sub, dfn, var, etc. are not used at all for ordinary websites. Delete those that you cannot use. Eric Meyer would encourage you to do the same!
Framework and reset will help your work very well, but if you don't remove those uses that you don't need, it will drag down the efficiency and readability of your pages.
5. Extended CSS
Stopdesign.com CSS by Doug Bowman Use special selectors for layers
Another way to optimize your code is to declare specific properties for each layer.
6. Document your work
In team collaboration, it is extremely important to communicate writing standards, coding standards, annotation methods, and style. Rules are based on a consistent approach to standards. This will prevent others from duplicating the work you have already done and prevent code expansion.
7. Use compression.
In order to save the browser more download and loading time, compression is a good solution, but only when publishing. YUI Compressor and CSSTidy are experts in this area. They can remove redundant code and verify errors when properties overlap each other.
Many popular editors, such as BBEdit, TextMate, and TopStyle, can help you format your CSS code how you want it. You can also use PHP to process your CSS through server compression technology. You can find more CSS optimization and compression CSS tools.
At one point, these procedures minimized the occurrence of errors, but they were not perfect. Likewise, it's best not to use them on files that contain CSS hacks. This is another reason to store hacks in separate files.
Finish
------------------------------------------------- ----------------------------------
Clean and optimized code isn't just about your file size, it's also about maintainability and usability. Readability. The above principles are not just for CSS, they can also be applied to HTML, Javascript and other programming languages. CSS files are not just for presentation to the end user of your website. The above principles can help user experience as well as developer experience. Apply these principles to your future projects and you're sure to achieve significant results.