Efficient CSS Coding

One of the advantages of CSS is that it can reduce the page size and shorten the download time, not only the loading of the homepage, but also after the style sheet is cached, the loading of subsequent pages is also accelerated. This is true, but the shortening of the loading time on the homepage is almost invisible because the CSS code is too long.

Okay. Now, let's learn how to perform CSS encoding efficiently, so that you can immediately cut the style sheet to a minimum. Naturally, you may not see any amazing changes, but small bytes are also important for large websites.

There are many ways to reduce the code length, including shorthand properties, multiple declarations, default values, and inheritance ), and white space ).

Note attributes

Zeroing page margins mentioned a set of such note attributes, but there are more. Note attributes include:

Font (Control "font-size", "font-weight", "line-height", etc.) background (background, placement location, repeat times, etc)
List-style (set the attribute of the "Origin" at the front of the list element)
Margin (defines the width of the margin (margin) on each side of the box)
Border (defines the attributes of the box boundary (border)-there are many brief attributes related to the boundary) padding (defines the width of the padding on each side of the box)

For example, the font attribute is used to set the simple attributes of font-style, font-variant, font-weight, font-size, line-height, and font-family at the same time. Of course, not all of them must be written in the simplified attributes. Once a certain attribute is ignored in the summary attribute, all missing attributes will be set as their initial values, as mentioned in the font Property Section in W3C standards. To control many font-related attributes, you can use this note attribute to save a large number of bytes in the style sheet.

The same applies to background and list-style attributes. There are still other attributes on the four sides of the CSS box model that cannot be classified at all.

Note attribute on the side of the box

The four sides of any block level element (such as Div, table, list, and paragraph) have edge white (margin), border (Border), and padding (padding ), you can set different widths. For border, different border-style and border-color can be assigned to each edge. To explicitly specify all these attributes one by one, the Code becomes lengthy. The meaning of using the note Rule is as follows: completely reducing the burden.

"Zhongkui"

When you need to specify one of the three "Box-Side" attributes, and the situation on each side is the same, you can use the most basic features of the simple attribute:

Margin: 5px; border-width: 5px; padding: 5px; Note: You must set the border-style attribute to display the border, otherwise, the border-width boundary cannot be displayed. You can set it either directly through border-style or through the border attribute.

However, it is very likely that a different value is needed on one side, and the "Clock" feature of CSS will come on stage. Think of the box as a minute. When the Pointer Points to 12 points, it indicates the upper side of the box. This is the meaning of the first value in the shorthand property; the next is 3 points, this is the right side of the box; next is, indicating the bottom of the box; last is, the left side of the box.

Let's take a look at this example. On the page, we need a 10 PX top white box, 5px right white box, 3px bottom white box, and no left white box. The margin summary attribute should be written as follows:

Margin: 10px 5px 3px 0;

In the attribute Declaration, several values must be separated by spaces. And as long as the value is not zero, you must specify the Unit for it.

Why do we not need to specify the Unit for zero-width edge white? Because the zero value in any unit (PX, em, %, and so on) is equal to the value in any other unit.

Improved zhongji

When some values are repeated, these "Box-Side" attributes can also be squeezed shorter. As mentioned above, if all sides are the same, you can specify only one to apply it to all. Once the style at the top and bottom is the same, there is another style on the left and right. The margin code can be written as follows:

Margin: 10px 5px; this line of code sets the edge white at the top and bottom to 10px and the sides to 5px. The last technique is as follows: if the top and bottom are different, the two sides are the same, for example, the top is white 10px, the left side is white 5px, and the bottom is white 20px. We can write this:

Margin: 10px 5px 20px; these abbreviations are determined by the number and order of given values. To sum up, one value = all sides; two values = one on the top and the other on both sides; three values = one on the top, the same on the left, and one on the lower; of course there are four values = clockwise. Okay, isn't that hard to remember now?

Some boder differences

The same bell-plane profile model can also be used for border profile attributes and padding. Border-width, border-color, border-style, and padding work in the same way as margin. However, processing the border attribute is a bit different. The border attribute sets the border-width, border-style, and border-color attributes for each side of the box.

If all the four-side styles are the same, of course there will be no problems. But what if they are different? Do we have to go back and use the old border-top and border-right? Yes, yes. But fortunately, we still have a more efficient approach.

The boundary of the box has the same style and color, but the width is different. The most effective method is to define the border-width by using the border notation as usual, border-style, and border-color; and then set the border-width attribute again to overwrite the width set above:

Border: 10px solid red;
Border-width: 10px 5px 3px 0;

If all the border attributes (width, style, and color) are different on different sides, I am afraid the above method is useless, but it is usually not so weird. If the changed attribute is only border-style or border-color, the above method can be used as in the case of border-width.

Next, let's take a look at the changes that will occur when writing efficient CSS in another situation.

Multiple declarations

Consider that we have six Div with absolute positioning (such as the layers in Dreamweaver), and their other attributes are the same, except that the positions on the page are different. Because they have different positions, they should naturally have different IDs or classes, but the remaining attributes are the same.

A Layout Editor (WYSIWYG) may write a set of attributes for each ID, including the font rules, text rules, and location definitions. You can repeat these Div rules exactly the same over and over again, isn't that stupid? Then we can minimize these rules:

# First {left: 0 ;}
# Second {left: 100px ;}
# Third {left: 200px ;}
# Fourth {left: 300px ;}
# Th {left: 400px ;}
# Sixth {left: 500px ;}
# First, # Second, # Third, # Fourth, # second th, # Sixth {
Position: absolute;
Top: 0;
Width: 75px;
Font-size:. 9em;
Font-weight: bold;
Text-align: center;
Line-Height: 1.4em;
Background-color: Silver;
Color: Navy;
Padding: 5px;
Border: 1px solid Navy ;}

List the IDs of all similar divs and separate them with a space. The following rule blocks will be applied to all these IDs. Obviously, if such a rule is repeated for each ID, the Code expands much. This is probably the most common and most effective method to shorten the style sheet.

Note: The last Id separator does not contain a comma. (If Commas are added) Some browsers may still see those Divs, and others may regard such style sheets as errors without displaying any Divs.

Default Value

Many CSS attributes have their default values. If this attribute is not defined and replaced, it will be applied to HTML elements. For example, in each padding attribute, the initial values of padding-top, padding-right, padding-bottom, and padding-left are both 0. Therefore, if an element does not require any padding, you can choose not to set the attributes of the padding.

Note: The note attributes, such as those we have discussed earlier, do not have any default values. After all, note attributes are only a reproduction of independent attributes. If they have default values, they are also the default values of independent attributes. Although many default values set in the property index section of CSS standards are none or 0, browsers often set different default values for different properties.

For example, the Opera Browser sets an 8 PX padding for the body element. H1-h6 title and paragraph, both non-zero edge white by default. The default edge white and complementary white used in the list and list subitems are different for each browser.

Inheritance

Another way to avoid writing redundant code is to understand which attributes of the parent element will be inherited by the child element. There are only a few inherited attributes, and most of them are not commonly used, such as voice-family. Therefore, columns of tables that can inherit common attributes are actually very short. The following is the color output in alphabetical order:
Font (and its related attributes)
Letter-spacing
Line-height
List-style (and its related attributes)
Text-align
Text-indent
Text-Transform
White-space
Word-spacing

In some older browsers, the inheritance feature may be problematic. However, most modern browsers handle this correctly. Remember the list above to reduce unnecessary code. Of course, if you want to see the complete list, refer to CSS 2 Property Index.

Blank

It does not mean the white-space attribute of CSS. This attribute has a fixed value. We are talking about the gaps in the style sheet itself. White spaces are commonly used for line breaks and spaces used to improve readability in one line. Although deleting all of them may leave only one byte, the benefits are limited.

The key is that if they are all deleted, the CSS file will become very difficult to read and modify. If you really want to do this, you may wish to create a primary CSS file and then generate a copy based on it to delete all the blank copies. During modification, only the primary file will be modified, generate a copy based on the master file.

Please note that some white space is required in CSS encoding. Deleting the necessary ones will lead to unexpected problems. If the W3C standard uses a statement such as "space separated", spaces cannot be omitted. Common spaces such as the separated values in the simplified attributes, and the descendant Combinator, or the drop selector, are a space. Therefore, the method of deleting the blank space is still less useful when it is not available.

Last

You have learned several ways to make your style sheet more efficient. The benefit is that not only has the download time been reduced, and the clear, easy-to-understand, and changed code comes with it. Even if you use a typographical tool to edit a style sheet, you can use these methods to change it to an efficient one. Margin: 10px 5px 3px 0;

From: http://www.cnblogs.com/hicc/archive/2008/02/20/1074500.html