CSS minification

What is CSS minification ?

Minimization consists in removing unnecessary characters from a file in order to reduce its size, so it compacts the instructions. The characters that are not useful for the interpretation of a CSS style are mainly comments, spaces and tabs.

It is important not to confuse minification with compression, because compression will use algorithms to reduce the size of the file. The browser of the recipient of the file will therefore have to perform a decompression operation to interpret the file, which minimization avoids.

Why is it important to minimize a CSS file ?

Removing unnecessary characters improves the loading time because the CSS file weighs less. 

How to perform a CSS minimization ?

To perform this treatment, it is interesting to use a tool (and not to do it manually) such as cssminifier.com that allows you to minimize an online CSS style.

Example of a style before minification :

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

After minification :

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

It is also possible to include external styles in their minimized version. Many vendors (CDN) offer this for the production version.

Manual optimizations can also be made in the declarations, such as, for example, reducing the color declaration to hexadecimal #000000, which can be shortened by #000. This is also possible if two elements have the same style, then they can be combined within the same block :

  h1 {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

  .title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

Optimization :

  h1, title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #ccc;
  }