Seven principles for organizing and optimizing CSS code

Http://www.smashingmagazine.com/2008/08/18/.
Http://blog.bingo929.com/7-principles-optimized-css.html.

As a web designer (front-end engineer), you may still remember the suggested webpage size: the size of a web page (including HTML, CSS, Javacript, Flash, and images) should not exceed 30 kb, with the increasing size of the Internet and the rapid development of network bandwidth, many designers no longer consider this 30KB ideal principle. With the increasingly popular CSS layout and the enhancement of Javascript on the Website user experience, this phenomenon is becoming more and more common, especially for large websites, only one CSS file has exceeded the limit of 30 kb.

But even so, there are still many rules to help you compress and optimize CSS code after the CSS layout is completed. The purpose of CSS code optimization is not only to reduce the size of CSS files, but also to make your CSS code more organized and efficient. In bin Go, you will learn more about CSS code optimization, which helps you become more familiar with the standardization of CSS code. Being familiar with these concepts will also allow you to become a more comprehensive web designer and write more optimized CSS code.

You can also refer to the 10 CSS shorthand skills that storm bin once explained to make you always use (http://blog.bingo929.com/10-css-shorthand-tips.html ).

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 preceding shorthand method, you can also take a look at the following two shorthand tutorials (in English), which may be helpful to you:
CSS Shorthand Guide (CSS) (http://www.dustindiaz.com/css-shorthand)
Efficient CSS with shorthand properties (simplified for Efficient CSS properties) (http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties)

2. Avoid using Hack

 

 

Jon Hick's blog hicksdesign. co. uk/journal uses browser conditional comments

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 comments are used to serve specialized CSS code that meets browser features. Therefore, smaller and core CSS code is used to serve standard-compliant browsers, the extra CSS file will be downloaded only when the requirement condition appears (such as IE!

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

Whether it is for self-reading or secondary development, CSS should be well readable, and white spaces will play 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)

 

Resetting rules used by Nathan Smith's 960 Grid System CSS framework

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.

5. Ensure that CSS can be maintained in the future.

 

Doug Bowman's stopdesign.com CSS uses a special selector for the Layer

Another way to optimize CSS code is to divide CSS life into clear structure blocks according to your habits. The CSS file declaration is separated by comments and typeset, which makes it easier for you to review the CSS file for a long time. By then, your efficiency will be much higher.

However, storm Binbin advocates the split layout style, that is, a separate CSS file for each layout. Andy Clarke's book Transcending CSS also advocates this method.

6. Record your work

 

David Shea explained in detail the markup guide on his website mezzoblue.com ).

If you are a member of a design team, it is important to keep your code consistent with the rules and establish good communication with other idioms, it also sets up a website standard. For example, a team member has come up with a good website tag switching interface. recording these ideas and annotations will help other team members to use this effect again, this avoids the bloated HTML or CSS code.

The record mainly includes the markup guides and style sheet guides, which are not only applicable to teams, it also applies to a person's design work (a person's "team "). After all, after a complete design project, after a year or longer, you may feel unfamiliar when you come back to see the code you have previously written. In the future, you will learn about how CSS structures make webpages behave, or the side effects of those webpages on form buttons.

Remember, you must develop the habit of writing comments in CSS.

7. Compression

Compression is a good solution to save more download loading time for the browser, but only for publishing. YUI Compressor and CSSTidy are experts in this field. They can remove unnecessary code and verify errors that overlap attributes.
Many popular editors, such as BBEdit, TextMate, and TopStyle, can help you format your CSS code as you want. You can also use PHP to process your CSS through server compression technology. You can find more CSS optimization and compression tools.

One thing, these programs try to reduce errors, but they are not perfect. Similarly, it is best not to use them to process files containing CSS hack. This is another reason for storing hack in other files.

Summary

Organize and optimize the Code not only for the size of your CSS file, but also for maintainability and readability. The above principles are not only for CSS, but also for HTML, Javascript, and other programming languages. CSS files are not just for presentation to the end users of your website. The above principle can help users experience and developer experience. Applying these principles to your future projects will surely produce significant results.

Link: http://www.blueidea.com/tech/web/2009/6642.asp