9 Tips for streamlining and optimizing CSS files

Because the CSS file is loaded on the head of the Web page, each visitor downloads the files. We will optimize PHP files, pictures, and often ignore the CSS file. Today we should think about the problem and do something about it.

CSS optimizers can be used to optimize CSS, but I think the efficiency and ability will improve if you write code using the techniques described below.

Optimizing CSS files also saves traffic while increasing page loading speed.

1. Note

Annotations are especially useful when writing CSS, so co-workers who work together will understand what the code means. There are a variety of annotation methods, and you can use the following methods:

/*-------------------*/

* *-----Comment-------* *

/*-------------------*/

You can also use the following methods:

/*comment*/

This saves 20 characters, and if you have 15 annotations, you can save 300 characters.

2. Abbreviation color code

The color code is defined with the hex codes, which contains 6 characters, but in some cases it can be replaced with 3 characters. Look at the following example:

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */
3. Merging elements

For example, if you have a bunch of H2 H3 and H4, and they all have the same attributes, and only the individual properties are different, you can write as follows:

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{　　font-size:1.2em; }
h3{　　font-size:1.1em; }
h4{　　font-size:1em; }
This merges the elements of the same attribute and declares different font size attributes. Can save a lot of space.

4. The value is 0 o'clock omit out px/em/%

0 does not require px,em and percent semicolons. When your value is 0 o'clock (I think you will use it), omitting the unit can save one times the characters.

div{padding:0px 5px 5px 10px;}

/* Shorthand: padding:0 5px 5px 10px; */