How to remove unused CSS in website

Hello everyone!, today i’m going to tell you how to remove unused CSS  from your stylesheet. First of all let’s discuss why you should clean your stylesheet to remove unused CSS. Main reason is that the file size will be increased and affected the site loading performance and also your style sheet will be untidy and you will find difficulties when managing the code.

So we use a free web service called uncss-online to accomplish this. Mainly there are two boxes to insert your code and on the bottom there is another box to get your shortened CSS styles. First you need to copy and paste the all HTML code of your website(If there are 5 HTML pages in your website, copy and paste all the HTML code of them.) to identify the Classes and IDs used in your files and sometimes you need to be aware of the Classes and IDs used in your custom javascript files. If those Classes and IDs are not used in your HTML code, then the related styles to those Classes and IDs will be removed and it may break your site layout. So now you have to copy and paste your custom CSS to the box in the right side and finally press the button “UNCSS MY STYLES”. That’s all. Now you have your tidy CSS in the bottom box.

Share:

Meet the Author

Dushan Maduranga

Software Engineer at DigiTecz Inc, who loves to drink a lot of cups of tea when coding gets complicated. He believes it helps him to stay refreshed and focused. He loves to write articles for DigiTecz on web technologies when he is not coding.