Efficiency Handbook of Style sheet writing [original translation]

Style sheet

From positioniseverything to write efficient CSS is an easy to understand the CSS optimization technology teaching articles, practical, beautiful text, very classic, once Jjgod have translated, but the link has been invalidated, oneself also did not save, so simply use their own style translation, if can achieve Jjgod translation level will be my honor. Although I try to retain the original author's authentic, but in the translation process found that the author used vivid words translated into Chinese instead of vivid, to add their own tone and use the word habit, this should make the translation back to "vivid":)
The level is limited, if has the mistake to request the treatise ...

The benefits of efficiency
The most popular advantage of CSS is to reduce the volume of the page, which reduces the download time, whether it is the first time the page is downloaded, or after the immediate loading from the cache. This is true, but the volume that was saved during the first download of the page is often wasted because of the extremely redundant style sheet code.
Well, it's all over, let's start again. You'll learn some highly efficient style sheets to write "secret skills," and start squeezing your stylesheet very marrow to the last drop of juice. Of course, you can't save a "huge" volume of pages, but for those sites that survive in fierce competition, saving a byte is a byte, and these saved bytes are invaluable to them.
There are several ranges for "byte slimming", including shorthand attributes , Multiple declarations , use of default values , property inheritance , and whitespace processing .

Shorthand properties
Several CSS shorthand properties are discussed in how to set the page margin to 0 (zeroing page margins) , but there is still much to say about this topic.

The commonly used shorthand properties include:

• font-fonts, control "font-size" (font size), "font-weight" (font number of points), "line-height" (row height), etc.
• background -background, control elements background, positioning, repetition, etc.
• list-style -list style, setting properties for list bullets
• margin -margin, defines the width of the blank space that is left beside the borders of the boxed container
• border -border, which defines the style properties of the box-shaped container's borders, where you'll see a few shorthand properties involving borders
• padding -inner margin, defines the padding width of the inner side of the box-shaped container

The above list items can be directly linked to the content chapters in the specifications CSS 2 .

For example, the font (font) property is set Font-styleat once (font style),font-variant(font variant),font-weight(font number of points) ,font-size(font size),line-height(row height), and font-family(Group of fonts). However, not all of these properties must be used at the same time in the shorthand attribute. When certain values in the abbreviated format are omitted, each "missing" attribute is actually specified to use its default value, which can be found in the Font property (font properties ) Content section of the specifications . If font-related style control properties are heavily used in a style sheet file, using this shorthand attribute can significantly reduce the volume of the stylesheet .

background (background) and List-style(List style) properties also have similar effects. The remaining shorthand attributes in the list refer to the four borders of a CSS box container, which is different from the first few properties.

Shorthand property for box container border
The four borders of any block-level element (divs-block, tables-table, lists-list, paragraphs-paragraph, and so on) have their own margins,borders , and Padding properties, you can set their width individually. Take borders , each border can be independently assigned Border-style(Border style) and border-color(border color). If you spell all these attributes, obediently, this single rule set is long enough! Using shorthand rules can greatly reduce your workload.

Clock
If a box-like container has a border property of four borders, it's OK to use the basic shorthand attribute, such as:

margin:5px;
border-width:5px;
padding:5px;
Note: You must set the Border-style (border style) to display the border. For this we can define the Border-style property or set the style in the border property. A border cannot be displayed just by using the Border-width property.

However, if the values of several of these borders are not the same, then a CSS feature that we call "clocks" is starting to work. Let's imagine a box-like container as a clock face. When the pointer is pointing upwards, they refer to the top edge of the box container, which is the first value of the shorthand attribute. Next is the three o'clock position, which is equivalent to the right side of the box-like container. Then the six o'clock position, which is equivalent to the bottom of the box container, and the last nine o'clock position refers to the left side.

Let's look at an example. We want to place a box container on the page with a top margin of 10px, a width of the right margin of 5px, a width of the bottom margin of 3px, and no left margin. Then use the margin shorthand attribute to write this:

margin:10px 5px 3px 0;
When declaring properties, these property values must be separated from each other by a space. Also, unless the property value is zero, each value must be marked with a unit.

Note that a bottom margin of zero values is defined as 0, because the unit does not matter if any value is zero. The 0 value of any unit (PX, EM,%, etc.) equals the value of 0 of any other unit.

Retrofit Clock
When a few borders are the same, the shorthand property of the border can be condensed more greatly. As mentioned earlier, when all borders are consistent, all borders use the same value, but if the top and bottom are consistent and the right and left sides are the same, in which case the margin code can be written as follows:

margin:10px 5px;

This write sets the margins of the top and bottom edges to 10px, and the side margins of the sides are 5px. Another trick is the when top side and the bottom of the different side and the consistency of the situation. Top margin 10px, left and right margin 5px, bottom margin 20px, so we write:

margin:10px 5px 20px;

It all depends on the number and order that the shorthand attribute uses. Remember, a value = All borders, two values = top/Bottom border, two sides border, three values = top border, two sides border, bottom border, four values = follow the clock surface principle. Okay, it's not too hard to remember, is it?

Border differences
Border Shorthand Properties You can also use this "clock" shorthand method (the border shorthand property) and the padding(inner margin). border-width,border-color,border-style and padding and margin (margins) are manipulated in the same way. However, there is a difference in theborder attribute. The Border property can set the border-width,border-style , and Border-colorof the four border of the box container at the same time.

It's good to handle when the four borders are all the same, but what if they're different? Do we have to go back to the old days like border-topandborder-right ? All right, maybe you can. Luckily, we have a different idea.

For example, the box-like container has the same style and color of each border, but the width varies. The most direct and effective way to do this is to use the basic border shorthand attribute to define border-width,border-style , and Border-color, and then use the The border-width property defines different border widths to cover the preceding settings, as follows:

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

If all the border properties of the four borders are different, this is not going to be very useful, but this is not always the case. If only the border-style or border-color attributes change, this method can be slightly modified to deal with the properties like the border-width .

Next, let's look at another situation and see how the efficient CSS is written differently.

Multiple declarations
For example, we have six absolutely-positioned blocks (layers in theDreamweaver ), all of which are the same, and they are all the same, and the difference is that they are separated from each other at the top of the page at a certain distance. Because they have different page positioning, they must take a separate class name or ID, except for the rest of their properties.

With the layout editor, you might write style rules for each ID individually, including all font rules, text rules, positioning statements, and so on. It seems really unwise to keep repeating the exact same rules like this, isn't it? That's right. The following are ways to minimize these rules:

#first {left:0;}
#second {left:100px;}
#third {left:200px;}
#fourth {left:300px;}
#fifth {left:400px;}
#sixth {left:500px;}
#first, #second, #third, #fourth, #fifth, #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;
}

By listing the IDs of these same blocks individually, and separating them with a comma followed by a space, the style rule for the subsequent large section applies to all six blocks. Obviously, if the attributes are repeatedly defined for each ID, the entire CSS becomes bloated. This is probably the only way to reduce the volume of the stylesheet most effectively.

Note: Make sure that the last ID selector is followed by NoWith commas, and should be written like the multiple ID rule set code sample above. Some browsers can still display these blocks, but some will see this as a code error without displaying any of the blocks.

Use default values
Most CSS properties have an initial default value, and when you redefine values for these attributes of the element, their default values are overwritten. For example, the properties of the inner margin,padding-top,padding-right,padding-bottom , and Padding-left, their initial values are 0. If you do not want the target element to have an inner margin, the inner margin attribute can be omitted and not written.

Note: The shorthand attribute we discussed earlier does not itself have a default value. Typically, each value is taken from a single property that is represented in the shorthand model. Although CSS 2 specification Property Index (attribute indexes)Many of the default values listed in the NoneOr 0, but browsers typically set different default values for certain properties based on different elements.

For example: Opera browser preset the inner margin of the BODY element is 8px. H1-h6 headings and paragraph elements usually have default margins of zero. Different browsers, for lists (list) and List-items (list items) preset internal and external margins of not 0 default values are not the same.

Property inheritance
Another way to avoid writing redundant code is to notice the attributes that the child element inherits from the parent element. There are few properties that can be inherited, many of which are not commonly used, like voice-family. There are few (alphabetical) lists of commonly used inheritable properties:

• color-Color
• Font (and related properties)-fonts and related properties
• letter-spacing-Word Spacing
• line-height-Row Height
• List-style (and related properties)-list styles and related properties
• text-align-text Alignment
• text-indent-text Indent
• text-transform-Text Conversion
• white-space-Blank
• word-spacing-Word Spacing

There are many problems with inheritance in some older browsers, and now the new browsers are generally able to implement inheritance correctly. As long as you know what attributes can be inherited, you can write less redundant code. Again, to review the complete list of properties, see the CSS 2 Property index (CSS 2 attribute indexes).

Processing of Blank
The white space here is not the White-space attribute with a specific value in the CSS, which is the blank space that exists in the style sheet file. These intervals come from line breaks that are used to produce new lines, and spaces that help improve readability in a single line. Although removing these intervals can save a few bytes of volume, it usually doesn't save much.

If these compartments are removed, the stylesheet becomes obscure, let alone modified later. If the project explicitly requires deletion of every extra byte, you'd better create a "master" style sheet file that is easy to read, then copy it and remove all the blanks, which is the live version style sheet in use. If you want to change it in the future, modify it in the easy to read main style sheet , and then copy and remove the blanks as shown above to continue as a "Live edition".

Be careful! Some spaces are required in CSS encoding, and if these spaces are removed, the CSS rules will also change and cause some unexpected results to occur. These spaces are required to use wording such as "space separated," which is used in the specification description of the consortium. This situation is common in the individual property values of the shorthand attribute. Often we talk about the inclusion of a selector contains a combination of characters, it's a space, and if you remove all the blanks from the selector, that's not a good idea. Maybe removing space is the best thing for the fanatics, isn't it?

Summarize
Now you've learned several ways to make your stylesheet more concise and cost-effective. The benefits of using these techniques often are not just to save style sheet volume, speed up downloads, but also to make stylesheets Chang clean and tidy, and often easy to read and understand code that is easy to modify and maintain later. Even if you create your stylesheet with a layout editor, you can use the methods mentioned in this article to make your "finished product" more reasonable and efficient!

Holly ' n John 　 e-Mail
©positioniseverything
Last Updated:july 3, 2004
Created November, 2003
Translated by Popo EVEROn October 10, 2004

—————————— Complete the full text ——————————

Translator Note: This article in the process of translation has attracted my attention, mainly some specific nouns how to translate the most appropriate, I have also seen a lot of domestic WEB standards related translation works and Chinese native works, In the meantime for some nouns have been tangled, each said a word, I will not take care of them, Chinese profound, want to unify a word is often not easy, not to mention the original is "imported" terminology. For example, padding, have turned into "fill", have turned into "filler", and turn into "patch", for the latter two I think can accept, at least homophonic can facilitate foreign language poor friend memory, but I still insist to turn it into "inner margin", because of this from the table meaning that the most image, padding is the border to the internal text of the distance, not called "inner margin" what is called. As to whether margin is a translation "blank" or "blank" or "gap", "interval", "margin", which is better, my mother used to be a senior editor, she told me should be called "white edge", since I have turned the padding into "internal margin", Then it seems that margin can only make a pair of "margin". There is a box , the most seen is turned into "box model" or "box object", I am too lazy to wordy what. In any case, just one's own see, also so the false translation, I hope not to confuse ~ ~ ~