10 CSS shorthand/optimization tips

CSS Shorthand refers to the shorthand of multiple lines of CSS properties, also known as CSS code optimization or CSS abbreviations . The biggest benefit of CSS shorthand is the ability to significantly reduce the size of CSS files, optimize the overall performance of the site, easier to read.

The following are common CSS shorthand rules:

First, Box size

This is mainly used for two properties: margin and padding, we take margin for example, padding is the same. The box has four directions up and down, with an outer margin in each direction:

1234	margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

You can write in Jane:

1	margin:1px2px 3px4px;

Grammar margin:top right bottom left;

12345678

//四个方向的边距相同，等同于margin:1px 1px 1px 1px;margin:1px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px;margin:1px 2px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;margin:1px 2px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。margin:1px 2px 1px 3px;

Second, border (border)

The properties of the border are as follows:

123	border-width:1px;border-style:solid;border-color:#000;

can be abbreviated as a sentence:

1	border:1pxsolid#000;

Syntax border:width style color;

Iii. Background (backgrounds)

The properties of the background are as follows:

12345

background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:00;

can be abbreviated as a sentence:

1	background:#f00url(background.gif) no-repeat fixed 00;

The syntax is Background:color image repeat attachment position;
You can omit one or more of the property values, and if omitted, the value of the property will be the default value of the browser, which is:

• Color:transparent

• Image:none

• Repeat:repeat

• Attachment:scroll

• position:0% 0%

Four, font (fonts)

The properties of the font are as follows:

12345

font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"Lucida Grande",sans-serif;

can be abbreviated as a sentence:

1	font:italicsmall-caps bold1em/140%"Lucida Grande",sans-serif;

Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.

V. List (lists)

Cancel the default dot and ordinal can be written like this list-style:none;
The properties of the list are as follows:

123	list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);

can be abbreviated as a sentence:

1	list-style:squareinsideurl(image.gif);

VI. Colour (color)

16 binary color values, if each two bits of the same value, can be shortened by half. For example:

Aqua: #00ffff--#0ff
Black: #000000--#000
Blue: #0000ff--#00f
Dark Grey: #666666--#666
Fuchsia: #ff00ff--#f0f
Light Grey: #cccccc--#ccc
Lime: #00ff00--#0f0
Orange: #ff6600--#f60
Red: #ff0000--#f00
White: #ffffff--#fff
Yellow: #ffff00--#ff0

Seven, the attribute value is 0

The writing principle is that if the CSS property value is 0, then you do not have to add units to it (for example: Px/em), which you might write:

1	padding:10px5px 0px0px;

Let's try this:

1	padding:10px5px 00;

Eight, the last semicolon

The last attribute value can be followed by a semicolon without writing, such as:

123456

#nav{border-top:4pxsolid#333;font-style: normal;font-variant:normal;font-weight: normal;}

Can be simply written as:

123456

#nav{border-top:4pxsolid#333;font-style: normal;font-variant:normal;font-weight: normal}

Nine, font weight (font-weight)

You may write this:

123456

h1{font-weight:bold;}p{font-weight:normal;}

Can be simply written as:

123456

h1{font-weight:700;}p{font-weight:400;}

Ten, Fillet radius (Border-radius)

The Border-radius is a newly added attribute in the CSS3 that is used to implement rounded borders.

123456789

-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;

Can be simply written as:

123	-moz-border-radius:06px 6px;-webkit-border-radius:0 6px 6px;border-radius:0 6px6px;

Grammar Border-radius:topleft topright bottomright bottomleft

10 CSS shorthand/optimization tips