Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect unused CSS rules [duplicate]

Tags:

css

I am developing a website.
I use ready template.this template contains many css files with many css rules.
But I have few pages and I am sure I didn't use all selectors.
Is there any tool exist for scanning project HTML files and finding unused css rules and remove them ?
I found this question that says :

Dust-me Selectors is a firefox plugin that finds unused selectors.

But its not compatible with FF6 and seems it just review current viewing page and not scans whole website files.

like image 647
Shahin Avatar asked Sep 14 '11 00:09

Shahin


People also ask

How do I know if I have unused CSS classes?

Coverage Tab in Chrome DevTools (Manually) This Coverage tab helps us find unused Js and CSS code. Open your Chrome browser, go to “Developer Tools”, click on “More Tools” and then “Coverage”. A Coverage will open up.

How do I get unused CSS rules?

The Coverage tab in Chrome DevTools can help you find unused JavaScript and CSS code. Removing unused code can speed up your page load and save your mobile users cellular data.


1 Answers

You can get a general idea with chrome's developer tools.

  1. Open the page in Chrome
  2. Open developer tools (Ctrl+Shift+I)
  3. Open the Audits tab
  4. click run
  5. expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.

This doesn't list them out oh wait... it does... XD

like image 130
Joseph Marikle Avatar answered Sep 27 '22 15:09

Joseph Marikle