-1

Chrome Developer Tools shows the percentage of unused CSS and also lists all unused rules.

It seems that Google Chrome just shows unused rules. How does it help?

How can I remove the unused rules, instead of removing them one by one from each CSS file?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
network
  • 459
  • 4
  • 13
  • 1
    Possible duplicate of [How to identify unused css definitions](http://stackoverflow.com/questions/135657/how-to-identify-unused-css-definitions). This and other answers across the web could have been found easily with a quick search. The best solution to your issue is probably to throw away all your existing CSS and rewrite it. –  Nov 28 '16 at 05:10
  • Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, tutorial, explain a technique or provide any other off-site resource are off-topic for Stack Overflow Stack Overflow – Paulie_D Nov 28 '16 at 12:23
  • 1
    I disagree @Paulie_D: https://stackoverflow.com/help/on-topic: `if your question generally covers… software tools commonly used by programmers; and is ..then you’re in the right place to ask your question!`. For me it's on topic. OP doesn't ask a third-party tool, but just the built-in Google Chrome developer tools. – Basj Feb 04 '22 at 00:48
  • Please undelete https://stackoverflow.com/a/45971784/1422096, it's the best answer so fare, with good screenshots! – Basj Feb 04 '22 at 00:49
  • @user663031, no, it's not a duplicate. The link you can is about "how to identify", whereas here it's "how to remove them". – Basj Feb 04 '22 at 00:53
  • The solution there and on every such question is the same as the one here and includes information on removing it, not just finding it. – TylerH Feb 10 '22 at 14:36

2 Answers2

1

DevTools (Chrome 59) has CSS and JavaScript code coverage.

Click the three dots in the top-right, devtool → more tools → coverage and click the Reload button.

red is unused.
green is used.
Click each file to check it.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
hong4rc
  • 3,999
  • 4
  • 21
  • 40
0

It's hard to define what unused CSS rules would be, to be honest. Imagine the following:

Some global.css file

.classA {
   font-size: 12px;
}
.classB {
   font-size: 14px;
}

File page1.html

<div class="classA">
</div>

File page2.html

<div class="classA classB">
</div>

Technically in page1, classA has 100% of its CSS rules being used and applied while in page2, they are being overridden completely. Does this count as an unused rule? If so then doing this would be pretty dangerous as clearly you would be removing the styling for something you weren't aware of.

If not and Chrome is merely pointing out that putting "display: block" on a div element is redundant as it's the default value for a div element, then that's a different story of which I do not know the answer.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
k2snowman69
  • 1,849
  • 1
  • 14
  • 19