How to find CSS related to specific page?

Question

Is there any way to find which CSS tags and elements are related to the specific HTML page section?

For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?

Answer 1

For Chrome

In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :

---

For Firefox

You could install one of these add-ons :

• CSS Usage for Firebug
• Dust-Me Selectors

CSS Usage

Dust-Me Selectors

Answer 2

How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.

For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.

This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.

Answer 3

I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?

The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).