Minification of CSS files

Minifying a CSS file implies the removal of unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site. When a user requests a webpage, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs. It improves the site speed and accessibility and helps the search engine rankings move up.

The unnecessary characters removed in minification include white spaces, line breaks, comments, and block delimiters. The minified CSS files end with ‘.min.css’ extension.

CSS before minification:

.card-list {
    width: 85vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

CSS after minification:

.card-list{width:85vw;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:20px}.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0)}

This article discusses two methods of minifying the CSS files.

1. css-minify npm
   • First, install the tool using

     npm install css-minify -g

   • To minify a single CSS file, type the following command:

     css-minify -f filename

   • To minify all the css files of a directory, type:

     css-minify -d sourcedir

     where sourcedir is the name of the folder containing the css files.

   The minified CSS files will be stored in a folder named ‘css-dist’. So, always create a ‘css-dist’ folder in the same directory that stores your css file/folder.

   Example:
   On the Desktop, we have a CSS file named as ‘1.css’ and a folder ‘css-styles’ containing all the CSS files.
   We also create a ‘css-dist’ folder to store the minified CSS files.

   Minifying the single CSS file:
   
   This stores the minified ‘1.min.css’ file in the ‘css-dist’ folder.

   Minifying the CSS files in the css-styles folder:
   

2. Online tool like CSS Minifier:
   • Paste in your source code or upload the source code file.
   • Click a button to minify or compress the code.
   • Copy the minified code output or download the minified code file.