{"id":20055,"date":"2014-05-19T21:01:57","date_gmt":"2014-05-19T13:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20055"},"modified":"2025-04-04T01:45:58","modified_gmt":"2025-04-03T17:45:58","slug":"unload-unnecessary-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/","title":{"rendered":"How to Remove Unnecessary CSS Using Grunt"},"content":{"rendered":"<p>Using a framework like <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/bootstrap\/\">Bootstrap<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-foundation-4-responsive-framework\/\">Foundation<\/a> is one of the fastest ways to build a responsive website. These frameworks include everything you need, such as the <strong>Grid and User Interface components<\/strong>, to create a functional and attractive site.<\/p>\n<p>However, these frameworks are designed to cover a wide range of scenarios, so they come with <strong>lots of predefined CSS that you might not need for your website<\/strong>.<\/p>\n<p>Not every style is necessary for your specific needs, and having all these unused styles increases your stylesheet size, which can negatively impact your website\u2019s loading performance. In this article, we\u2019ll show you how to <strong>remove those unnecessary styles from your stylesheets<\/strong> using Grunt.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/grunt-command-not-found\/\" class=\"ref-block__link\" title=\"Read More: Quickly Fix Grunt \u2018Command Not Found\u2019 Error in Terminal\" rel=\"bookmark\"><span class=\"screen-reader-text\">Quickly Fix Grunt \u2018Command Not Found\u2019 Error in Terminal<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/grunt-command-not-found.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18066 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/grunt-command-not-found.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Quickly Fix Grunt \u2018Command Not Found\u2019 Error in Terminal<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn one of our previous post we have discussed how to build customized jQuery. In the process, we...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Getting Started<\/h2>\n<p>To achieve this, we need <strong>Grunt CLI<\/strong>. Make sure you have it installed on your computer. You can refer to these previous articles for more information:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-remove-modules\/\">How To Remove Unnecessary Modules In jQuery<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/grunt-command-not-found\/\">Solving Grunt \u201cCommand Not Found\u201d Error In Terminal<\/a><\/li>\n<\/ul>\n<p>Assuming you have a project directory ready with HTML and CSS files, let\u2019s proceed.<\/p>\n<p>As shown in the screenshot below, I have two folders: <strong>build<\/strong> (for saving stylesheets during development) and <strong>css<\/strong> (for the final output of the stylesheet).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg\" height=\"150\" width=\"500\" alt=\"Project directory structure\"><\/figure>\n<p>Navigate to your project directory through Terminal and enter the following commands. These commands install <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gruntjs.com\/\">Grunt<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/uncss\/grunt-uncss\">grunt-uncss<\/a>, the Grunt plugin needed to remove unused CSS.<\/p>\n<pre>\r\n npm install grunt --save-dev\r\n npm install grunt-uncss --save-dev\r\n<\/pre>\n<h3>Basic Configuration<\/h3>\n<p>Create a file named <strong>Gruntfile.js<\/strong> in your project directory. Open it in a code editor and add the following code:<\/p>\n<pre>\r\n module.exports = function(grunt) {\r\n   grunt.initConfig({\r\n     uncss: {\r\n       dist: {\r\n         files: {\r\n           'css\/style.css': ['index.html']\r\n         }\r\n       }\r\n     }\r\n   });\r\n   grunt.loadNpmTasks('grunt-uncss');\r\n   grunt.registerTask('default', 'uncss');\r\n };\r\n<\/pre>\n<p>This basic configuration of <code>grunt-uncss<\/code> fetches the stylesheet links from the <code>.html<\/code> file, identifies unused CSS selectors, and outputs the cleaned CSS to <code>css\/style.css<\/code>.<\/p>\n<h3>Optional Configuration<\/h3>\n<p>The <code>grunt-uncss<\/code> plugin offers several options. For instance, if you want to ignore certain selectors, you can use the <code>ignore<\/code> parameter:<\/p>\n<pre>\r\n module.exports = function(grunt) {\r\n   grunt.initConfig({\r\n     uncss: {\r\n       dist: {\r\n         files: {\r\n           'css\/style.css': ['index.html']\r\n         }\r\n       },\r\n       options: {\r\n         ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class']\r\n       }\r\n     }\r\n   });\r\n   grunt.loadNpmTasks('grunt-uncss');\r\n   grunt.registerTask('default', 'uncss');\r\n };\r\n<\/pre>\n<p>You can also specify particular stylesheets to process using the <code>stylesheets<\/code> parameter:<\/p>\n<pre>\r\n module.exports = function(grunt) {\r\n   grunt.initConfig({\r\n     uncss: {\r\n       dist: {\r\n         files: {\r\n           'css\/style.css': ['index.html']\r\n         }\r\n       },\r\n       options: {\r\n         ignore: ['#id-to-ignore', '.auto-generated-class', '.ignore-this-class'],\r\n         stylesheets: ['build\/style.css']\r\n       }\r\n     }\r\n   });\r\n   grunt.loadNpmTasks('grunt-uncss');\r\n   grunt.registerTask('default', 'uncss');\r\n };\r\n<\/pre>\n<p>Adjust the output path according to your project\u2019s requirements.<\/p>\n<h2>Run UnCSS<\/h2>\n<p>Here\u2019s the content of my HTML file:<\/p>\n<pre>\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;title&gt;CSS Unloaded&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/3.0.0\/normalize.min.css\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"wrapper\"&gt;\r\n    &lt;h1 class=\"page-title\"&gt;Unload CSS&lt;\/h1&gt;\r\n    &lt;div class=\"first-div\"&gt;&lt;p&gt;1st&lt;\/p&gt;&lt;\/div&gt;\r\n    &lt;div class=\"second-div\"&gt;&lt;p&gt;2nd&lt;\/p&gt;&lt;\/div&gt;\r\n    &lt;div class=\"third-div\"&gt;&lt;p&gt;3rd&lt;\/p&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>And here is the content of my stylesheet:<\/p>\n<pre>\r\n.wrapper {\r\n  width: 960px;\r\n  margin: 60px auto;\r\n}\r\n.page-title {\r\n  color: red;\r\n}\r\n.first-div, .second-div, .third-div, .fourth-div {\r\n  width: 100px;\r\n  height: 100px;\r\n}\r\n.first-div {\r\n  background-color: #000;\r\n  color: #fff;\r\n}\r\n.second-div {\r\n  background-color: #555;\r\n  color: #ccc;\r\n}\r\n.third-div {\r\n  background-color: #ccc;\r\n  color: #f3f3f3;\r\n}\r\n.fourth-div {\r\n  background-color: #aaa; \r\n  color: #777;\r\n  position: absolute;\r\n}\r\n<\/pre>\n<p>The only class not present in the HTML file is <code>.fourth-div<\/code>. This class will be removed from the stylesheet. Launch Terminal and type <code>grunt<\/code> to run the task configured in Gruntfile.js.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/grunt-uncss-run.jpg\" height=\"180\" width=\"500\" alt=\"Running grunt-uncss task\"><\/figure>\n<p>Open the CSS files. You\u2019ll see that the <code>.fourth-div<\/code> class selector has been removed since it\u2019s not used in the HTML.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/output.jpg\" height=\"320\" width=\"500\" alt=\"Output CSS after running grunt-uncss\"><\/figure>\n<p>If you have many unused styles, this method can help you significantly reduce your stylesheet file size.<\/p>","protected":false},"excerpt":{"rendered":"<p>Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need, such as the Grid and User Interface components, to create a functional and attractive site. However, these frameworks are designed to cover a wide range of scenarios, so they come with&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,4501,2695],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Remove Unnecessary CSS Using Grunt - Hongkiat<\/title>\n<meta name=\"description\" content=\"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Remove Unnecessary CSS Using Grunt\" \/>\n<meta property=\"og:description\" content=\"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-19T13:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:45:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Remove Unnecessary CSS Using Grunt\",\"datePublished\":\"2014-05-19T13:01:57+00:00\",\"dateModified\":\"2025-04-03T17:45:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/\"},\"wordCount\":400,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/unload-unnecessary-css\\\/folders.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\",\"Grunt\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/\",\"name\":\"How to Remove Unnecessary CSS Using Grunt - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/unload-unnecessary-css\\\/folders.jpg\",\"datePublished\":\"2014-05-19T13:01:57+00:00\",\"dateModified\":\"2025-04-03T17:45:58+00:00\",\"description\":\"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/unload-unnecessary-css\\\/folders.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/unload-unnecessary-css\\\/folders.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/unload-unnecessary-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Remove Unnecessary CSS Using Grunt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Remove Unnecessary CSS Using Grunt - Hongkiat","description":"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Remove Unnecessary CSS Using Grunt","og_description":"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,","og_url":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-19T13:01:57+00:00","article_modified_time":"2025-04-03T17:45:58+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Remove Unnecessary CSS Using Grunt","datePublished":"2014-05-19T13:01:57+00:00","dateModified":"2025-04-03T17:45:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/"},"wordCount":400,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg","keywords":["CSS","CSS Tutorials","Grunt"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/","url":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/","name":"How to Remove Unnecessary CSS Using Grunt - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg","datePublished":"2014-05-19T13:01:57+00:00","dateModified":"2025-04-03T17:45:58+00:00","description":"Using a framework like Bootstrap and Foundation is one of the fastest ways to build a responsive website. These frameworks include everything you need,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/unload-unnecessary-css\/folders.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/unload-unnecessary-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Remove Unnecessary CSS Using Grunt"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5dt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20055"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20055\/revisions"}],"predecessor-version":[{"id":73688,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20055\/revisions\/73688"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20055"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}