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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.