How to do Css Minification with CSSO

Posted By : Rajan Rawat | 23-Apr-2019

css

In the process of becoming a CSS owner, you need to know how to solve problems and optimize CSS. How do you diagnose and fix rendering problems? How do you ensure that your CSS does not cause performance delays for end users? How to ensure the quality of the code?

Know which tools are available to help you make sure your front end is working. In this article, we will discuss CSS reduction.

Developer tools can help you find and resolve presentation problems, but how efficient is it? Is our file size as small as possible? To do this, we need to shrink the tool.

The reduction in the CSS context simply means "eliminating extra characters." For example, consider this code:

h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}

Now the above code will take 98 bytes and it also including spaces and line breaks. Let’s take a look at the minified version

     h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;
    ?margin:10px auto 0}

Now our CSS is only 80 bytes long, a reduction of 18%. Of course, fewer bytes means saving you and your users faster download times and data transfers.

In this article, we'll introduce the CSS optimizer, or CSSO, a shrinking tool that runs on Node.js. To install CSSO, you must first install Node.js and npm. Npm is installed as part of the Node.js installation process, so you only need to install one package.

Using CSSO requires you to feel comfortable using the command line interface. Linux and macOS users can use the terminal application (Applications> Terminal.app for macOS). If you are using Windows, use a command prompt. Go to the Start menu or Windows and type cmd in the search box.

CSSO Installing

After the setup of Node.js and npm, you can install the CSSO by the below command

                npm install -g csso

The CSSO will be installed globally because of -g flag and you can use it from command line

CSSO Minification

For the minification of CSS use below followed by CSS file name

                csso style.css

This command performs the compression and the CSSO removes the unwanted semicolons and whitespace and it also deletes the comments

Now after the Minification and compression are done you have to save the new minified file by below command. for example, you have to save the style.css as the new file style.min.css