CSS minify

The minification of a CSS file means the elimination of unnecessary characters from the source code to decrease the size of the file. The main purpose of minification is to increase the speed of the website.

When any user requests on a webpage, then instead of sending the full version, the minified version will be sent. It results in the lower cost of bandwidth and makes the response time faster. It helps to make the site accessible and increase the ranking of the search engine.

Minification includes the removal of unnecessary characters such as line breaks, white spaces, block delimiters, and comments. The minified CSS files end with the extension '.min.css'.

Minification is different from compression. Compression is used to make a minified file reduce, but it does not affect the structure and styling of the code. After the minification, the minified code is harder to read for the human but not for a machine. It is because the machine does not care about the whitespaces and the beauty of code.

How to minify the CSS file?

There are multiple tools available online to minify the CSS file. We can use them to reduce the size of the CSS file. Let's discuss them.

CSS minifier - An online tool

It is an online tool that helps us to minify the CSS file. You can use this tool by following the link https://cssminifier.com/. This tool is simple to use. In this tool, first, we have to paste our source code, or directly upload the source code file. Then, we need to click the minify button to minify the CSS file. After completing the process, our CSS code will get minified, and we can see it in the minified output column.

Let's see how it works.

smallseotools.com

It provides us a CSS minifier tool to reduce the CSS file. You can use this tool by following this link https://smallseotools.com/minify-css/. It is a simple tool to use. Here, first, we have to copy the code, or we can also upload the source code file. After that, it will minify the code and allows us to copy or download the minified code.

The second method of minifying the CSS file is by using the npm command.

css-minify npm

First, we have to install the tool by using the following command.

npm install css-minify -g

Run the above command in your terminal window. It will take some time. Then, to minify the CSS file, type the below command with the corresponding file name.

css-minify -f filename

Befoe using the above command, we have to make sure that the filename must be ended with .css extension.

The above command is for minifying a single CSS file. If there are multiple CSS files, then we have to use the following command to minify the entire source directory.

css-minify -d sourcedir

Here, we need to create a new folder, 'css-dist', in the same directory that will store the minified CSS files.

Let's see how it works.

Here we have a CSS file name 'example.css'. Let's minify it by using the above commands.

Open the same directory and folder that contains the CSS file in the terminal window. After that, run the command with the filename that you want to minify. It can be seen in the image below:

Now, we can see the minified source code file in the new folder 'css-dist' with the corresponding file name and the extension .min.css.