Using a framework, like Bootstrap and Foundation, is one of the fastest ways to build a responsive website. These frameworks have all the things needed, including the Grid and the User Interface components to build a decent, functioning website.
But, frameworks aim to cater to as many web scenarios as possible. Thus, they include loads of predefined CSS that you may not use in your website as well.
Not every style is useful for every purpose, but having them all around increases your stylesheet size unnecessarily, ultimately affecting your website load performance. In this article, we are going to show you how to unload those unnecessary styles from the stylesheets.
Recommended Reading: Solving Grunt “Command Not Found†Error In Terminal [Quickfix]
Getting Started
To accomplish this idea, we need Grunt CLI. So ensure that you have it installed in your computer. You may refer to these two previous articles to know more about it:
I assume that you have a project directory ready, containing HTML and CSS.
As you can see from the following screenshot, I have two folders named build â€" this is used to save the stylesheets through the development stage; and css â€" this will be the destination folder of the stylesheet final output.
Then navigate to the project directory through Terminal and type the following command consecutively. Those two commands install Grunt and grunt-uncss, the Grunt plugin that we need to run the task for removing unused CSS.
npm install grunt --save-deve npm install grunt-uncss --save-deve
Basic Configuration
Create a file named Gruntfile.js in your project directory. Open the file in a code editor, and put the following codes in it.
module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}
The code above is the basic plugin configuration; grunt-uncss will grab the stylesheet links from the .html, locate CSS selectors that are not used in the specified .html, and send the output to css/style.css.
Optional Configuration
grunt-uncss comes with a number of options. Say you want it to ignore particular selectors, you can include ignore parameter and specify the selectors, like so.
module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
},
options: {
ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}
You can also control grunt-css to process only for particular stylesheets in place of the ones that are pulled out from the HTML file with the stylesheets parameter.
module.exports = function(grunt) {
grunt.initConfig({
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
},
options: {
ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],
stylesheets: ['build/style.css']
}
}
});
grunt.loadNpmTasks('grunt-uncss');
grunt.registerTask('default', 'uncss');
}
Configure the output path as per your project requirement.
Run UnCSS
Below is the content of my HTML file.
<html> <head> <title>CSS Unloaded</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <h1 class="page-title">Unload CSS</h1> <div class="first-div"><p>1st</p></div> <div class="second-div"><p>2nd</p></div> <div class="third-div"><p>3rd</p></div> </div> </body> </html>
…and this the content of my stylesheet.
.wrapper {
width: 960px;
margin: 60px auto;
}
.page-title {
color: red;
}
.first-div, .second-div, .third-div, .fourth-div {
width: 100px;
height: 100px;
}
.first-div {
background-color: #000;
color: #fff;
}
.second-div {
background-color: #555;
color: #ccc;
}
.third-div {
background-color: #ccc;
color: #f3f3f3;
}
.fourth-div {
background-color: #aaa;
color: #777;
position: absolute;
}
The only class that is not present in the HTML file is .fourth-div. The class has been removed from the stylesheet. Launch Terminal, and type grunt to run the configured task in Gruntfile.js.
Open both CSS files. You will see that the .fourth-div class selector is already removed as it is not used in the HTML.
When you have loads of unused styles, this tip can help you significantly decrease the stylesheet file size.
No comments:
Post a Comment