-1

I want to have an automatical way to find unused CSS in a static HTML page (no javascript, all CSS code are embedded) and delete them.

I currently manually search for the unused CSS. But this is not efficient. It seems that there is not such a way yet. But I want to doublecheck to make sure.

EDIT: A standalone command line tool is preferred.

user1424739
  • 11,937
  • 17
  • 63
  • 152
  • This might help: https://medium.com/officialrajdeepsingh/how-to-find-unused-css-in-the-website-54d773d76b65 – Geeky Quentin Jul 22 '22 at 15:41
  • Could you provide an easy-to-use answer for it? Some of the answers found in the link assume the separation of HTML and CSS. But in my case, CSS is embedded in HTML. A standalone command line tool is preferred. – user1424739 Jul 22 '22 at 16:19

1 Answers1

1

1. purify css

use this tool at this link: https://purifycss.online/

It searches through the HTML files and the given CSS files, it removes redundant CSS styles and writes the purified CSS to another file, then re-links the HTML files to the purified CSS file.

enter image description here

2. coverage - devtools

there is functionality on devtools called "coverage"

https://developer.chrome.com/docs/devtools/coverage/

that make you see how many bytes are used,
and how many aren't.

enter image description here

you can also use it to see what selectors aren't useful!

enter image description here

the blue lines means: CSS is used
the red one means: CSS isn't used

as mentioned by @quentin

the pseudoelements, pseudoclasses are red by default.

so try to debug the normal CSS with this dev tools tool.

also for debugging you need to use first the app, then see what CSS you really used for the things, and debug.
I tried now: if you use the website also :active, :hover not become red

3. make CSS to CDN

the tool that I suggest you is jsdelivr

why cdn?

  • cache: that makes your CSS cachable for a year,

    • so you install the CSS to the device, and then the device will not install it anymore.
      saving time, and network resources.
    • there isn't any code to do, it automatically does it for you.

  • minify: the CSS code will be minified,

    • so spaces and tabs will be deleted
    • the code will be only in one line.
    • long variables, became one character vars.

  • simple: you can make every Github or npm file a CDN easily.
    like this: https://cdn.jsdelivr.net/gh/user/repo@version/file

Laaouatni Anas
  • 4,199
  • 2
  • 7
  • 26
  • Isn't that just manually checking by hand still? – Dennis Kozevnikoff Jul 22 '22 at 15:37
  • This even marks red for pseudo elements like `:focus`, :`active`, etc. – Geeky Quentin Jul 22 '22 at 15:38
  • @geeky yes, he need first to use the app like a normal user, then check the coverage, and see what code is used at the end, and what not. yes isn't that good, but still, helps the developer to see what isn't used at the end. – Laaouatni Anas Jul 22 '22 at 15:39
  • OP wants to remove the unused CSS, if all the red ones are marked "unused", and removed, then all the pseudo elements get deleted – Geeky Quentin Jul 22 '22 at 15:41
  • he can use logic in his program, that don't delete the `::after` and pseudoelements. something like this `if(isRed && !isPseudoElement) { /* delete code */ }` maybe solve this bug – Laaouatni Anas Jul 22 '22 at 15:44
  • But this does not automatically delete the unused css. – user1424739 Jul 22 '22 at 16:14
  • Then, this is not relevant to my question. Please delete the answer. – user1424739 Jul 22 '22 at 16:21
  • if you want automatic use `purgecss` and a cdn creator like `jsdeliver` that can minify the code something lke this style.min.css – Laaouatni Anas Jul 22 '22 at 16:22
  • cdn is not needed. I just have a standalone HTML with CSS embedded. Using a cdn for this problem is overkill. – user1424739 Jul 22 '22 at 16:36
  • @user1424739 ok. I find you a solution. use this tool https://purifycss.online/ , is simple and work for jsyt html and css – Laaouatni Anas Jul 22 '22 at 16:39
  • But it requires html and css be separated. In my case, CSS is embedded in HTML. Is there a place I can paste HTML code, so that I will have URL to serve on purifycss.online via the URL based method? – user1424739 Jul 22 '22 at 16:41
  • ok, I reread your comment, and I understand. copy the CSS inside the ` – Laaouatni Anas Jul 22 '22 at 16:52