How to Find Unused CSS Styles with Chrome Dev Tools

Рет қаралды 15,377

3 жыл бұрын

The Chrome Dev Tools have become incredibly powerful over the last few years. What used to require an external website or specialized extensions, can now be done directly in the browser.
This includes finding you unused CSS declarations and even JavaScript functions.
Code from video: gist.github.com/prof3ssorSt3v...

Пікірлер: 50

@RogerThat902 3 жыл бұрын

I never knew this. Very helpful, particularly because sometimes I'm not even 100% what is necessary and what can be removed.

@PixieSpright 3 жыл бұрын

Please more obscure webdev tips that can't be found anywhere else. This channel is gold.

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

There is a playlist for webdev tools on the channel homepage

@viallymboma9874 3 жыл бұрын

My best teacher...

@HarshKapadia 3 жыл бұрын

Cool! I used the coverage tab, but I didn't know that one could click on the rows to see the used and unused code lines. As always, thank you Steve!

@arunace 2 жыл бұрын

I was searching for something like this, even thought this is amazingly helpful, thank you so much for sharing this :)

@osherezra8460 3 жыл бұрын

Always wondered if there such a thing, now I know. thanks again Steve for all the AWESOME content keep it up :)

@azox_sudo 3 жыл бұрын

amazing video as always keep them coming man

@kevinpro13 Жыл бұрын

This is amazing and solved my issues! Big thanks!

@WitlessMean 3 жыл бұрын

great video as always, thank you

@marceloduarte6906 2 жыл бұрын

Thank you. You've helped me a lot.

@narek7281 3 жыл бұрын

Awesome content, thank you

@mrSargi7 3 жыл бұрын

useful stuff, thanks Steve

@billpliske 2 жыл бұрын

This is brilliant.

@ibendiben 2 жыл бұрын

Conveniently called 'useless'. I'll look up that class in my css now ;)

@misaelgomezcruz Жыл бұрын

great video, tanks

@ritali6582 2 жыл бұрын

Thanks ! it is very great video !

@cherishnature513 2 жыл бұрын

Thanks for this 👍

@ghanendarsinghashia6797 2 жыл бұрын

Thank you sir 🙏🙏🙏 That was really helpful , improve mu site score

@Adnankhan545 3 жыл бұрын

Always best

@akulla3D Жыл бұрын

Thanks.

@abderrahmanemr 3 жыл бұрын

Helpful

@Banna3Sixty 2 жыл бұрын

nice! is there any way i can copy user class or no user class from here in one click?

@TonyFranco82 3 жыл бұрын

Thank you Steve! Please do you have a video talking about the JS also? At other comment is asked about "orphaned class references" and you answer that is needed other extensions or tools, please could you say something about it? I´m learning this now and testing some websites where you paste the json files and the css is presented, but when i test it gives errors. I´m trying to find a safe way to work.. All css code needed for a webpage is called at html code? In this moment my goal is make a very clear files for loading fast...

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

It don't currently have any other videos on other extensions or tools for cleaning up CSS. I have a few other videos about dev tools in Chrome but not about what you are describing.

@m12652 3 жыл бұрын

Good stuff! Anything that works in reverse, I.e. list orphaned class references?

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

You need other extensions or tools for that.

@mechlsd 2 жыл бұрын

Thxs Steve. Subscribed. BUT this is great for single-page site. But you could run into problems that if a id or class is not used on that page it will be flagged. But it may be needed for another page on your website, so you really should not delete it. Do you know if there is a method of scanning all pages on the website?

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

It is a quick easy tool for checking a page to see if the developer recognizes things that shouldn't be in the page anymore. There are lots of tools that can be added to your tool chain with npm/yarn/webpack. It has been a while since I have worked directly with any so I would hesitate to recommend what is currently best.

@arunace 2 жыл бұрын

I had an upgraded query on this topic... "How to check if any CSS classes are being used or not... throughout the website (across all the pages) ?" Is there a tool or plugin or a way to do this ? Thank you in advance. :)

@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын

I have seen lots of tools for highlighting and finding unused css classes. There are browser extensions, IDE extensions, and node-based code tools. I have not tried many of them so I hesitate to recommend. VSCode has an extension - marketplace.visualstudio.com/items?itemName=rcore.rcore-unused-css-classes - that looks decent. Don't use ones that say they will REMOVE the classes. Use ones that will highlight the CSS that appears unused. You will know if you are referencing the css in your JavaScript better than the tool does. I see that you already watched my video about the Chrome built-in tool.

@victorgeorge8831 3 жыл бұрын

Sir what if some css is been used in the inner pages if i have a journey on my website?? How can i assure what to delete and what not?

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

You still need to make your own decisions about what to remove. Test all your pages. Try to build your CSS with consistency across pages so changes have the same effect everywhere. No automated system will equal intelligent decisions by the developer.

@rogermarquez1314 3 жыл бұрын

Is there an easy way to just extract the "blue" portion of the used stylesheet and just upload a cleaner version of that CSS? For free of course, I know there are paid tools that generate CPCSS

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

Editing your css should be a process that involves human intervention by the developer who knows the purpose of the styles and whether it not being used a specific page means that it is not used in other locations. Automated deletion of styles is a lot like blind find and replace... a dangerous process.

@yannicknana 3 жыл бұрын

How would you fix the unused portion from materialize ?

@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын

With a framework like materialize I would use the sass source and select only the modules I needed.

@alirezataslimi1115 10 ай бұрын

hello steve - Unfortunately, this blue and red part has disappeared in the new updates and it shows all blue - what is the solution? In fact, there is no way for unused CSS.

@SteveGriffith-Prof3ssorSt3v3 10 ай бұрын

I just tested it in the new version of Chrome. It still works. All blue means that it is all being used. If you hover over the colour bar it will display a title with the details.