Shulou(Shulou.com)06/02 Report--

This article will explain in detail what are the seven principles of CSS code collation and optimization. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

There are many guidelines to help you compress and optimize CSS code after completing the CSS layout, and follow certain rules while optimizing. Here are 7 principles for sorting and optimizing CSS code.

Seven principles for sorting and optimizing CSS Code

As a web designer (front-end engineer), you may remember that page size advice: a web page (including HTML, CSS, Javacript, Flash and pictures) try not to exceed the size of 30KB, with the growing size of the Internet, network bandwidth is also developing rapidly, many designers no longer consider the ideal principle of 30KB. With the increasingly popular CSS layout and the enhancement of the user experience of Javascript, this phenomenon is becoming more and more common, especially for large websites, only one CSS file has exceeded the upper limit of 30KB.

But even so, there are many guidelines to help you compress and optimize your CSS code after you complete your CSS layout. The purpose of CSS code optimization is not just to reduce the size of CSS files, but also to make your CSS code more organized and efficient.

1. Use abbreviations

If you still don't know anything about abbreviations, you will be out of date again, but fortunately, it is not very difficult to learn. Using abbreviations is the easiest way to reduce code. There is no better time to practice code shorthand than now, so what are you waiting for? let's take a look.

Margin, border, padding, background, font, list-style, and outline are all properties that can be abbreviated. CSS abbreviation is no longer using different similar properties of the declaration.

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

You can simplify them like this:

P {margin:10px20px30px40px;}

Browsers can interpret your defined CSS code by a different number of attribute values, please see the illustration:

The above shorthand illustration shows that different abbreviations can be made according to different attribute values, and this method also applies to padding and Border-width properties.

The abbreviation of Font is very helpful in reducing the amount of code and allows you to type a lot less letters;)

An example of the abbreviation of Font. Note: if an attribute value is not defined, the definition of the secondary element is inherited or the default value is used.

If you already know the above abbreviations like the back of your hand, you can also take a look at the following two shorthand tutorials, which may be helpful to you:

1.CSSShorthandGuide (CSS abbreviated Guide)

2.EfficientCSSwithshorthandproperties (shorthand for efficient CSS attribute)

two。 Avoid using Hack

Hack is a terrible thing that defines the same code for different browsers, making CSS cumbersome. Now we know that conditional comments are used instead of hack, which are recognized in IE6 and IE7, and even the IE team recommends this. Use conditional comments to serve CSS code specific to browser characteristics, so smaller, core CSS code is used to serve standards-compliant browsers, downloading additional CSS files only when demand conditions arise (such as IE)! This code causes IE6 to download additional ie6.css to parse its dedicated css code. Similarly, if you only need to replace 6 and 7 above for IE7.

3. Use blank space

Whether it is for your own reading or secondary development, it is necessary to keep CSS readable, and blank space plays a key role.

We do not encourage you to remove all white space formats, such as tab, line breaks, spaces, etc., in order to get a smaller CSS file. It is recommended that nested code use an tab indent, with all properties on a separate line.

Comparing the two CSS writing formats in the image above, which format can save you more time in reading and editing? The effect of leaving blank is obvious, and it will make it easier for you to manage the code.

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

If you choose to use CSSframework, including your own writing, if you check the code, you will find that some of the rules contained in the framework do not apply to your current file, they can be deleted.

It can also be thought of that reset and EricMeyer's reset (Reset) used by reset,YUIGridCSS are now very popular, and Resets can remove the default styles from different browsers, making the page behave consistently across browsers. But they usually contain all the attributes needed for a large site, such as attributes that are not used at all for ordinary sites, and delete those that you don't need. EricMeyer will encourage you to do the same!

Framework and reset will help you with your work, but if you don't get rid of those you don't need, it will slow down the efficiency and readability of your page.

5. Let CSS guarantee future maintenance.

Another way to optimize CSS code is to divide the CSS life into clear building blocks according to your habits. Separating the declaration of the CSS file with comments and typesetting it will make it easier for you to review the CSS file a long time later, when you will be much more efficient.

However, Feng Binbin prefers the split layout style, which is to give each layout a separate CSS file. AndyClarke's book beyond CSS (TranscendingCSS) also advocates this approach.

6. Keep track of your work

If you are a member of a design team, it is important to keep your code consistent and communicate well with other idioms, as well as to establish a website standard. For example, a member of the team has come up with a good site tag switching interface, and recording these ideas and comments will help the rest of the team use this effect again, thus avoiding bloated HTML or CSS code.

Recording work mainly includes markup wizard (markupguides) and stylesheet wizard (stylesheetguides), which applies not only to teams, but also to one person's design work (one person's "team"). After all, after a complete design project, after a year or more, you will feel strange when you come back to see the code you once wrote. In the future, you will learn from your own records of how those CSS structures make the web page behave, or the side effects of that web page on form buttons. Remember, be sure to get into the habit of writing comments for CSS.

7. Compression use

To save browsers more download time, compression is a good solution, but only at the time of release. YUICompressor and CSSTidy are such experts who can remove redundant code and verify errors in which attributes cover each other.

Many popular editors, such as BBEdit,TextMate and TopStyle, can help you format your CSS code the way you want it to. You can also use PHP to process your CSS through server compression technology. You can find more CSS tools for CSS optimization and compression.

For one thing, these programs reduce the occurrence of errors as much as possible, but not necessarily. Again, don't use them to deal with files that contain CSShack. This is another reason for those hack to be stored in separate files.

Organize and optimize your code not only for your CSS file size, but also for maintainability and 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 users of your site. The above principles can help the user experience as well as the developer experience. Applying these principles to your future projects is sure to achieve significant results.

On the CSS code finishing and optimization of the seven principles are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.