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.

Syntax

CSS minification removes unnecessary characters from CSS code without changing its functionality

/* Original CSS */
.element {
    /* comment */
    color: red;
    margin: 10px;
}

/* Minified CSS */
.element{color:red;margin:10px}

Method 1: 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.

Installation: First, install the CSS-minify NPM package using the following command:

npm install css-minify

After installation, execute the below command to minify a particular CSS file

npx css-minify -f filename.css

To minify all CSS files in a directory, use

npx css-minify -d directoryName

Example 1: Basic CSS Minification

In the example below, we demonstrate CSS minification using the CSS-minify package. The original CSS contains comments and whitespace, which gets removed during minification

.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;
}

The minified output removes all comments and whitespace

.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: Advanced CSS Minification

Here's another example demonstrating minification with nested selectors, pseudo-selectors, and complex properties

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;
}

The minified version optimizes selectors and combines similar properties

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}

Method 2: Using Online Tools

Another approach to minifying CSS is using online tools. Many tools are available that take normal CSS as input and generate minified CSS output. Popular options include:

• CSS Minifier - Simple online tool for basic minification
• Clean CSS - Advanced tool with optimization options
• Toptal CSS Minifier - Professional-grade minification tool

However, in real-time development, online tools are not practical for continuous minification as you can't minify CSS manually whenever you change the code. It's better to use automated tools like NPM packages or build tools.

Key Benefits

Conclusion

CSS minification is essential for optimizing website performance. While online tools work for small projects, using automated tools like the CSS-minify NPM package is recommended for development workflows. Minification reduces file sizes significantly, leading to faster load times and better user experience.