Original text | via: 9 Tips to Smaller & Optimized CSS Files
Author|Author: Stefan Vervoort
Translation|Trans: Luc
Since CSS files are loaded at the head of the web page, each visitor downloads these files. We will optimize PHP files and images, but often ignore CSS files. Today we should think about this problem and do something about it.
It is possible to optimize CSS using CSS optimizers, but I think both efficiency and power will be improved if you write your code using the techniques mentioned below.
Optimizing CSS files can also save traffic and increase page loading speed.
1. Comments Comments are particularly useful when writing CSS so that colleagues working together will understand the meaning of the code. There are many ways to annotate, you can use the following methods:
/*-------------------*/
/*-----Comment-------*/
/*-------------------*/
You can also use the following method:
/*Comment*/
This saves 20 characters, and assuming there are 15 comments, it saves 300 characters.
2. Abbreviated color codes Color codes are defined with HEX codes, which contain 6 characters, but in some cases 3 characters can be used instead. Look at the following example:
div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */
3. Merge elements. For example, if there are a bunch of elements such as h2, h3 and h4, and they all have the same attributes and only some attributes are different, then you can write it 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 elements with the same attributes while declaring different font size attributes. Can save a lot of space.
4. When the value is 0, Out Px/Em/% is omitted.
0 does not require Px, Em and percent sign. When your value is 0 (which I assume you will use), omitting the unit saves twice as many characters.
div{ padding: 0px 5px 5px 10px; }
/* Abbreviation: padding: 0 5px 5px 10px; */
5. Merge attributes. Some attributes such as padding, margin and border can be written separately. For example: padding-top, padding-right, padding-bottom and padding-left.
If possible, combine them to make them easier to write and save space.
div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }
/* Abbreviation: padding:50px 4px 23px 0; */
If the upper and lower values are the same and the left and right values are the same, you can write:
div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* Abbreviation: padding:5px 0; */
6. Choose Classes/ID wisely
The selected Classes and ID names should be as short, easy to understand, and meaningful as possible.
Avoid choosing names like "HeaderMiddleLeftCategories", use "h-cats" instead. This saves a lot of characters.
7. Clean up CSS files to save space. When using CSS to build a website, the written code may or may not work, and it takes up a lot of space. CSS files should be checked throughout for errors and invalid code to save space.
8. Remove the semicolon from the last attribute in the selector. This is a trick I discovered using CSS compressor. Check out this example:
body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */See, I removed the last semicolon. The effect may not be obvious, but a little adds up. 50 selectors are 50 characters.
9. Delete useless spaces and carriage returns You may want to delete all spaces and carriage returns because they take up one character. But the problem with this is that it destroys the structure of CSS and reduces readability.
I don't usually do this when optimizing CSS files because structure is more important to me. Here is a compromise, use files on the website that do not contain carriage returns and spaces. Saving files containing carriage returns and spaces locally makes editing very convenient.
Conclusion If you want to fully optimize CSS files, I recommend using CSS compressor, so that you can learn the above skills yourself and improve the writing speed and quality of CSS code.
If you have other tips, please leave a message.