Reprinted from https://www.qdfuns.com/article/11377/fafea703ea463fd1191ef0add2847963.html
We know that CSS has become a trend in website layout today when XHTML+CSS layout is popular, so why do we need a CSS file as small as possible? This is mainly based on two considerations of traffic and reading speed. Small CSS files can save your server traffic and shorten the time it takes for users to open your web pages. It not only saves traffic expenses, but also obtains a better user experience. Let's take a look at the methods of reducing CSS.
1. Simplify your comments
In many cases, especially programmers who have worked in C/Java and other language development, may like to write multi-line comments, for example: Of course there is no
problem with such comments in compiled languages, but in CSS They can significantly increase the size of the CSS file, and should try to simplify it like this:
This reduces the file size while maintaining readability. In fact, in a real release 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're probably used to writing in the following "standard form":
color: #ffffff;
color: #ff88ff;
In fact, this way of 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 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, and left. Of course, for the margin and padding attributes, when the left, right/top and bottom values 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.
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
with an 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 this:
h1,h2,h3 { margin: 0; padding: 0; }
6. Delete blanks and newlines
This is a trivial operation, but it should be done for CSS that is out of the development stage and applied on the web, at least all Google applications do this. For example:
h1 { margin: 0; padding: 0; } blockquote { background-color: #ffcccc; }
Should be processed as:
h1{margin:0;padding:0;}
blockquote{background:#fcc;}
事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。7. Set the expiration time and use GZip
If possible, we should set the expiration time of the CSS file and enable GZip to transfer the CSS file. Setting the former allows popular browsers to cache your CSS files, thereby avoiding the need to read files every time Load, greatly speeding up the speed and reducing traffic consumption. And turning on GZip can make your CSS file shrink to an unimaginable degree, and today's popular browsers all support GZip.
Disclaimer: This article is for learning purposes only, and is reproduced from the following link on Qianqian.com.
Reprinted from https://www.qdfuns.com/article/11377/fafea703ea463fd1191ef0add2847963.html