Seven principles for organizing and optimizing CSS code

Original English:Http://www.smashingmagazine.com/2008/08/18/
Original article: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 many rules to help you perform CSS after the CSS layout is completed.CodeCompression and optimization. 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 《You can use 10 CSS shorthand skills forever..

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:

1. CSS shorthand Guide(CSS Short Guide)
2. Efficient CSS With shorthand Properties(Simplified for efficient CSS attributes)

2. Avoid using hack

Jon hick's blogHicksdesign. co. uk/JournalUse 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 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)

Nathan Smith's960 Grid SystemReset rules used by 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.

The reset,YUi grid CSSUse reset and Eric Meyer's reset (Reset)Currently, Resets are very popular. resets can remove the default styles of different browsers, so that pages are consistent 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'sStopdesign.comCSS uses special selectors for layers

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 on his websiteMezzoblue.comFor more information, see (Markup Guide).

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)This kind of work is not only applicable to the team, but also to the design work of a person (a "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 CompressorAndCsstidyExperts in this field can remove unnecessary code and check for 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 server compression technologyUse PHPProcess your CSS. You can find more CSS optimization and CompressionCSS tools.

One thing isProgramErrors are minimized, 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 codeNot only for your CSS file size, but also for maintainability and readability. The above principles are not only for CSS, but also for HTML, JavaScript, and otherProgramming Language. 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.