Minification of CSS files

31 Jul, 2019
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.
css-minify npmFirst, install the tool usingnpm install css-minify -gTo minify a single CSS file, type the following command:css-minify -f filenameTo minify all the css files of a directory, type:css-minify -d sourcedirwhere 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: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.
css-minify npmFirst, install the tool usingnpm install css-minify -gTo minify a single CSS file, type the following command:css-minify -f filenameTo minify all the css files of a directory, type:css-minify -d sourcedirwhere 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:
First, install the tool usingnpm install css-minify -g
npm install css-minify -g
To minify a single CSS file, type the following command:css-minify -f filename
css-minify -f filename
To minify all the css files of a directory, type:css-minify -d sourcedirwhere sourcedir is the name of the folder containing the css files.
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:
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.
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.
CSS-Misc
CSS
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS