Ways to write efficient style sheets (CSS)

css| style Sheet

One of the benefits of CSS being touted is that it reduces the size of the page, thereby shortening the download time, not just the load on the home page, but also the part of the time when the stylesheet is cached and subsequent pages are loaded. That's true, but the reduction in the home page load time is almost invisible because CSS code is often too verbose.

Well, everything is different now. Learn how to do CSS coding effectively, so that you get the style sheet down to a minimum. Naturally, you may not see any startling changes, but small byte reductions are also important for major stations.

There are many places to reduce the length of the code, including the denoted property (shorthand properties), multiple declarations (multiple declarations), defaults (default values), Inheritance (inheritance), and whitespace (w Hite space).

denoted property

Zeroing page margins mentions a set of such denoted attributes, but there is more to it.

Typically, the denoted properties include:

Font (Control "font-size", "Font-weight", "line-height", etc.)
Background (controls the background of elements, placement, number of repetitions, etc.)
List-style (Set the attribute of the "origin" at the front of the list element)
Margin (defines the margin space (margin) width of each side of the box)
Border (defines the properties of the box boundary (border)-There are many denoted attributes related to the boundary)
Padding (defines the padding (padding) width of each side of the box)
The above items are linked to the relevant chapters of the CSS 2 specification of the Consortium.

For example, the Font property is a Line-height property that is used to set Font-style, Font-variant, Font-weight, Font-size, font-family, and denoted at the same time. Of course, not all of them must be written in the denoted attribute. Once one of them is ignored in the denoted attribute, those missing attributes are set to their initial values, as mentioned in the Font Property section of the standard-book. If you need to control a lot of font-related properties, you can use this denoted property to save a lot of bytes in your stylesheet.

The same is true for background and List-style properties. There are still a few of the attributes of the CSS box model and a bit of junk that can't be categorized.

　　denoted property of Box side

Any chunk level elements (such as Div, table, list, paragraph, etc.) have Benbert (margin), boundaries (border), and fillers (padding), each of which can be set to different widths. For boundaries (border), you can also assign different border-style and Border-color to each side. To explicitly specify all of these attributes, the code becomes verbose. The significance of using denoted rules is here: to reduce this burden completely.

　　"Clock face"

When you need to specify one of these three "box side" properties, and each side of the case is the same, use the denoted property the most basic function of the line:

margin:5px;
border-width:5px;
padding:5px;

Note: To make the boundary display, you must also set the Border-style property, otherwise the single border-width boundary is not displayed. You can either set it directly through Border-style or through the border property.

However, it is possible to have a different value on one side, when the CSS "clock face" features on the stage. Imagine the box here as a clock face, when the pointer points to 12 o'clock, which means the top of the box, this is the meaning of the first value in the denoted property; the next is 3, this is the right side of the box, then 6 points to the bottom of the box, and finally 9, to the left of the box.

Let's take a look at this example. In the page we need a 10px top white, 5px right white, 3px bottom white, no left white box. The margin denoted attribute should be written like this:

margin:10px 5px 3px 0;

In the declaration of a property, several values must also be delimited by spaces only. And as long as that value is not 0, you must give it a specified unit.

Why does the 0-width Benbert not need to specify a unit? Because the value of 0 units (px, EM,%, and so on) is equal to the value of any other unit.

　　Improved clock face

These "box side" properties can be squeezed even shorter when certain values are duplicated. As mentioned previously, if each side is the same, you can specify only one, so that it applies to all. And once the top and bottom styles are the same, the left and right side is another, margin code can write this:

margin:10px 5px;

This line of code sets the top and bottom edges white to 10px and the sides to 5px. The last tip is this: if the top and bottom of the different, the two sides are the same, such as the top white 10px, left and right side white 5px, the bottom white 20px, we can write:

margin:10px 5px 20px;

These abbreviations are based entirely on the number and order of values given. To sum up, a value = all sides; two values = upper and lower, one on either side; three values = one on the upper side, one on the other, the other on the lower side, and of course four values = clockwise. Okay, now it's not that hard to remember, is it?

　　Some differences in boundaries (border)

The same clock face denoted model can also be used for border denoted properties and padding. Border-width, Border-color, Border-style, and padding also work in the same way as margin.  However, the processing of border properties is somewhat different. The border property is to set the Border-width, Border-style, and Border-color properties for each side of the box at the same time.

If all four sides of the style are the same, then of course there is no problem. But what if they're different? We have to go back to the old Border-top, Border-right? Yes, it's OK. But luckily we have a more efficient approach.

Considering that we have the same style and color on each border of the box, but the width is different, the most effective way is to use the border denoted method to define the Border-width, Border-style, and Border-color as usual. Place the Border-width property once, overriding the width set above:

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

If all the boundary attributes (width, style, and color) are different, the above method may be useless, but it is usually not so weird. If the changing attribute is only Border-style or Border-color, the above method can be used in the same way as border-width.

Let's take a look at the changes that can be brought about by writing efficient CSS in another scenario.

　　Multiple declarations

Consider that we have 6 div (such as layers in Dreamweaver) with absolute positioning, and all of their other attributes are the same, except in different places on the page. Because their location is different, nature should have different IDs or class, but the remaining attributes are the same.

A (WYSIWYG) layout editor is afraid to write a set of attributes for each ID, including the rules of the font, the rules of the text, the definition of location, and so on. But it's a little silly to repeat the same rules over and over again for these Div, isn't it? That way we can 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;
}

Lists all similar IDs of these Div, separated by a space, and the following rule blocks are applied to all of these IDs. Obviously, if you repeat the rules for each ID, the code is much more expansive. This is probably the most commonly used and most effective way to shorten the style sheet.

Note: Note that the last ID selector does not follow a comma. Some browsers may also see those Div, and others may think of the style sheet as an error without displaying any div.

　　Default value

Many CSS properties have their default values, which are applied to HTML elements if they are not replaced by a defined attribute. For example, for each filler attribute, the initial value of Padding-top, Padding-right, Padding-bottom, and Padding-left is 0. Therefore, if an element does not require any filler, it is natural to not set those properties of the filler.

Note: Those denoted attributes--like the ones we discussed earlier--don't have any default values in them. After all, the denoted attribute is just a reproduction of the independent property, so if you insist that they have defaults, they are using the default values of the standalone attribute as well. Although many of the default values specified in the Property Index section of the CSS specification are none or 0, browsers tend to set different defaults for different properties.

Example: Opera browser sets the BODY element to 8px of filler. H1-h6 headings and paragraphs, by default there are nonzero Benbert. The default edge white and padding used in lists and list subkeys are different for each browser.

Inherited

Another way to avoid writing redundant code is to know which attributes that belong to the parent element are inherited by child elements. There are only a few attributes that will be inherited, and most of them are not commonly used, such as voice-family. So the list of common attributes that can be inherited is very short, and the following are sorted alphabetically:

Color
Font (and its associated properties)
Letter-spacing
Line-height
List-style (and its associated properties)
Text-align
Text-indent
Text-transform
White-space
Word-spacing

There may be some problems with inheritance in some older browsers, but most modern browsers are doing the right thing. Remember the list above to let you write less of the extra code. Of course, if you want to see the complete list, or refer to CSS 2 property Index.

Blank

Does not refer to the CSS white-space attribute, this property has a definite value already. We're talking about the blanks that the stylesheet itself contains. Whitespace is often used for newline characters, and spaces for improving readability in a single line. Although removing them may leave a few bytes left, the benefits are limited.

The point is that if you remove them, the CSS file becomes very difficult to read and more difficult to modify. If you're really going to do this, you might want to create a master CSS file, and then generate a copy of all the blanks based on it, modify the main file, and then regenerate the copy from the main file.

Note that the CSS encoding requires some whitespace to remove the necessary problems that will cause you to be unexpected. If the "space separated" statement is used in the standard of the consortium, then spaces cannot be omitted. Common spaces, such as those separating values in the denoted attribute, as well as drop-merging characters (descendant combinator), or drop selectors, are spaces. So when you don't have to use it, the way to delete it is less.

End

You've now learned several ways to make your stylesheets more efficient, and the benefit is that, in these techniques, not only is the download time reduced, but the clarity, ease of understanding, and changes in the code follow. Even if you use typesetting tools to edit style sheets, you can use them at the end to reformulation them as efficient.