How to optimize css

Optimization method: 1. Simplify comments; 2. Simplify color codes; 3. Use single-line attributes instead of multi-line attributes, that is, use abbreviated attributes; 4. Omit the unit when the value is 0; 5. Set simultaneously Attributes of multiple elements; 6. Delete whitespace and line breaks; 7. Set expiration time and use GZip.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Optimizing the css code can reduce the bytes occupied by the web page, shorten the time for the browser to download the css code under the same conditions, and speed up the opening of the web page. So how to optimize css code? Here are some tips for optimizing css code.

Tips for optimizing css code

1. Simplify your comments

Many situations Under the circumstances, especially programmers who have been engaged in C/Java and other language development work, they may like to write multi-line comments, such as:

Of course there is no problem with such comments in compiled languages, but in CSS they It will significantly increase the size of the CSS file. You should try to simplify it like this:

This reduces the file size while maintaining readability. In fact, in a real published version of the CSS file, you can completely remove these comments.

2. Simplify color codes

In CSS, we often deal with hexadecimal color codes. You may be used to writing the following "standard form":

color: #ffffff;
color: #ff88ff;

In fact, this writing method can be simplified in CSS, we can write:

color: #fff;
color: #f8f;

3, Use single-line attributes instead of multi-line attributes, that is, use the abbreviated attributes

In CSS, attributes such as margin/padding/font/border can be set with one line instead of many lines, for example:

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

We can write:

padding: 10px 0 10px 0;

The order is top, right, bottom, left. Of course, for the margin and padding attributes, when the values ​​​​of the left and right/top and bottom are the same, it can be written more simply , for example, the above example can be written as:

padding: 10px 0;

When the top, bottom, left and right are the same, it can even be written as:

padding: 10px;

For other abbreviation methods, you can refer to some information on the Internet . Of course, I recommend using the software TopStyle to learn in the process of writing CSS, it will give specific tips.

(Learning video sharing: css video tutorial)

4. When the value is 0, the unit can be omitted

For example:

padding: 0;

5. Set the attributes of multiple elements at the same time

Example. For example:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

A better way to write it is like this:

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. Delete blanks and line breaks

This is very inconspicuous Operation, but this should be done for CSS that has left the development stage and is to be applied on the Internet. At least this is how all Google applications are done. For example:

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

should be processed as:

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

In fact, there is no need for any line breaks in the CSS file. But in order to keep the code a little readable, I still recommend writing each element on one line. There are tools available today to do something similar so it won't impact your development process.

7. Set the expiration time and use GZip

If conditions permit, we should set the expiration time of the CSS file and enable GZip for transmission. CSS files. Setting the former allows popular browsers to cache your CSS files, thereby avoiding the need to read the file every time Load is performed, greatly speeding up the process while also reducing traffic consumption. Turning on GZip can shrink your CSS files to an unimaginable degree, and most popular browsers today support GZip.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to optimize css. For more information, please follow other related articles on the PHP Chinese website!