Minification of CSS files

If your app takes more than 3 seconds to load, you lose 50% of visitors. So, a slow-loading website can be frustrating for users, and they can navigate away from your site.

However, there can be many causes for the slow website, but one of them is larger CSS files. In real applications, we need to write lots of CSS to style different web pages. So, we can minify the CSS files to reduce the size of CSS files. When we minify the CSS files, it removes the whitespaces, comments, etc., from the file, decreasing the size of the CSS file.

This tutorial will teach us various approaches to minifying the CSS files.

Using the Css-minify NPM Package

The first approach is using the CSS-minify NPM package. We can install the NPM package in our project to minify the CSS files.

First, users require to install the CSS_minify NPM package in the project directory using the below command.

npm install css-minify

After that, move to the project directory in the terminal and execute the below command to minify a particular CSS file.

npx css-minify -f filename

In the above command, change the file name with the css’s file name to minify it.

If developers want to minify all existing files in the particular directory, execute the below command in the terminal.

npx css-minify -d direName

In the above command, change the ‘dirName’ with the directory name.

Let’s understand via the example below to minifying the CSS.

Example 1

In the example below, we added the normal CSS code to the CSS file. After that, we executed the above command to minify the CSS file. It creates the ‘css-dist’ folders and adds the filename.min.css file in the directory containing minified CSS code.

In the output, we can see that it removes whitespaces and comments to minify the CSS file.

.element {
   /* border for element */
   border: 2px solid blue;
   /* text color for element */
   color: red;
   /* adding a gradient to the element as a background */
   background-image: linear-gradient(45deg, #000, #fff);
}
div {
   /* padding for div */
   padding: 10px;
   /* margin for div */
   margin: 10px;
   /* border for div */
   border: 1px solid #000;
}

Output

.element{background-image:linear-gradient(45deg,#000,#fff);border:2px solid blue;color:red}div{border:1px solid #000;margin:10px;padding:10px}

Example 2

Here is another example demonstrating the minification of CSS. In this example, we used nested selectors, pseudo selectors, gradient functions, etc. After that, we have minified the CSS file using the CSS-minify NPM package.

li :nth-child(even) {
   /* selecting even elements of the list */
   background-color: #f2f2f2;
   color: green;
   border-radius: 12px;
   /* Applying padding */
   padding: 4px;
}
/* nested selector */
ul li ul {
   display: none;
   text-decoration: dashed;
   color: red;
   /* changing the font size */
   font-size: 12px;
   font-weight: bold;
}
div > p {
   color: blue;
   font-size: 12px;
   font-weight: bold;
}

Output

li :nth-child(2n){background-color:#f2f2f2;border-radius:12px;color:green;padding:4px}ul li ul{color:red;display:none;text-decoration:dashed}div>p,ul li ul{font-size:12px;font-weight:700}div>p{color:blue}

Using Online Tools

Another approach to minifying CSS is using online tools. Many tools are available in the market that takes normal CSS as input and generate minified CSS for us.

Users should try the toptal and cleancss online tools to minify the CSS.

However, in real-time development, online tools are not useful for minifying the CSS as we can’t minify CSS manually whenever we change the code of CSS. So, it is better to use the NPM package manager.