How do novices streamline and optimize CSS code? You will know it after reading this

The content of this article is about how novices can streamline and optimize CSS code. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

#1. Simplify your comments

In many cases, especially those who have been engaged in language development such as C/Java Programmers 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 will significantly increase the size of the CSS file. You should try to simplify it to This way:

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 can be simplified in CSS, we can write:

color: #fff;
color: #f8f;

3. Use single-line attributes instead of multi-line attributes

In CSS attributes such as margin/padding/font/border, etc., you can use one line to replace many line settings, 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 online. Of course, I recommend using the software TopStyle to learn in the process of writing CSS, it will give specific tips.

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

For example: padding: 0;

5. Set multiple values ​​at the same time The attributes of an element

are given as examples. For example:

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

A better way to write it is:

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.

The above is a complete introduction to how novices can streamline and optimize CSS code. If you want to know more about CSS video tutorials, please pay attention to the PHP Chinese website.

The above is the detailed content of How do novices streamline and optimize CSS code? You will know it after reading this. For more information, please follow other related articles on the PHP Chinese website!