How to Make CSS style sheets clean and brief

CSS abbreviation refers to declaring multiple rows of CSS attributes into one row, also known as CSS code 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, I have compiled some CSS shorthand skills, which are actually the most common 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;

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page