You can use 10 CSS shorthand skills forever.

CSS abbreviationMultiple rows of CSS attributes are declared as one row, also knownCSSCode optimization. The biggest benefit of CSS shorthand is that it can significantly reduce the size of CSS files. In fact, there are many other benefits. A bloated and messy CSS style sheet makes debugging difficult. Especially when a team is designing, your bloated CSS code will reduce the efficiency of other members of your team.

Today, storm has compiled some CSS shorthand skills, which are the most commonly used CSS writing methods. However, too many people use the WYSIWYG software Dreamweaver to write CSS, making the code too bloated. But it doesn't matter. After reading this article, you will be able to master the CSS code optimization skills and make every CSS style sheet look neat and short in the future.

The property value is 0.

The writing principle is that if the CSS property value is 0, you do not need to add units for it (for example, px/em). You may write the following code:

Padding: 10px 5px 0px 0px;

Try it like this:

Padding: 10px 5px 0 0;

Remove Selector

Selector is the basic method when you apply CSS styles to some elements, such as h1, h2, h2, div, strong, pre, ul, ol, etc... If you use class (. class Name) or ID (# id name), you do not need to include the selector when declaring CSS.

Div # logowrap

Try to discard the redundant selector:

# Logowrap

In this example, the selector is div.

* Joke with you

You need to use it wisely * to avoid messing around in the whole CSS style sheet. * is a wildcard. You can use it to declare a series of CSS statements for part or all of your designs. For example:

*{
Margin: 0;
}

This statement sets the margin value of all elements to 0. Similarly, for the sake of rigor, you can try to set it like this:

# Menu *{
Margin: 0;
}

This statement sets the margin of all elements in the # menu to 0.

Background

The background attribute may contain parameters for setting the background color, background image, background image location, and background image repetition mode. You may write it as follows:

Background-image: url(”logo.png ");
Background-position: top center;
Background-repeat: no-repeat;

You can write it as follows:

Background: url(logo.png) no-repeat top center;

Color

The color attribute is usually specified as a hexadecimal value in CSS, the short form is that if the color value is composed of three pairs of numbers that appear in pairs, You can omit one of them.

#000000 can be written as #000, #336699 can be written as #369

This short-cut technique is only applicable to the color values that appear in pairs, and the other color values are not applicable to this technique, such:

#010101, #223345, # FFF000

Margin (Margin/blank side)

When declaring CSS magin, it is usually written as follows:

Margin-top: 0px;
Margin-right: 10px;
Margin-bottom: 0px;
Margin-left: 10px;

Let's try to remove the unit with a value of 0 and combine the four statements into one statement:

Margin: 0 10px 0 10px;

When you use padding, margin, and border (and some other attributes), remember to declare the attribute values clockwise, that is, in the upper-right-bottom-left direction. There is another simpler way to write these attributes. Check whether the upper and lower, left, and right values in the attributes are equal. If so, you can further optimize them, you can omit the last two values. The remaining two values refer to the upper and lower sides, and the latter refer to the left and right sides:

Margin: 0 10px;

It indicates that the left and right values are 10px, and the upper and lower values are 0;

Padding (Padding)

The abbreviation of padding is equivalent to margin:

Padding-top: 0px;
Padding-right: 10px;
Padding-bottom: 0px;
Padding-left: 10px;

Can be written:

Padding: 0 10px;

Borders (Border)

The border shorthand method is more complex than other lifecycles. Many cssers are easy to remember at the beginning to mix its shorthand order. If you want to declare a 1-pixel-wide solid-line black border, may be written:

Border-width: 1px;
Border-style: solid;
Border-color: #000;

You can write it as follows:

Border: 1px solid #000;

Note: The color value here has used the abbreviated color method described above.

We can also set different widths for the four edges:

Border-top-width: 1px;
Border-right-width: 2px;
Border-bottom-width: 3px;
Border-left-width: 4px;

Can be abbreviated:

Border-width: 1px 2px 3px 4px;

Finally, we can only set the style of the left and right sides:

Border-right: 1px solid #000;
Border-bottom: 1px solid #000;

Although not much code is reduced, storm bin suggested writing it like this:

Border: 1px solid #000;
Border-width: 0 1px 1px 0;

First, set the default style of the four sides, and then declare which side is to be displayed.

Text

There are also many attribute values that may be used for text attributes. Like the background, you may declare such complex text styles:

Font-style: italic;
Font-variant: small-caps;
Font-weight: bold;
Font-size: 1em;
Line-height: 150%;
Font-family:, Arial, sans-serif;

In fact, we can optimize it into one line:

Font: italic small-caps bold 1em/150%, Arial, sans-serif;

List

List-style-type: square;
List-style-position: inside;
List-style-image: url(filename.gif );

Can be written:

List-style: square inside url(filename.gif );

Link: http://blog.bingo929.com/10-css-shorthand-tips.html