2

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?

Improve this question
3
  • 1
    In Chrome -> Right click on the element -> Inspect -> See the style linked to it (Right hand side). developers.google.com/web/tools/chrome-devtools/iterate/… Commented May 1, 2016 at 15:26
  • There are many, many libraries and tools which do this. Search harder. Commented May 1, 2016 at 16:02
  • I know this, I did, but there are many other elements which are related to that section and I can't find one by one through chrome inspect, that's why I was thinking maybe there's a software to find this. Commented May 1, 2016 at 16:13

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 :

enter image description here

For Firefox

You could install one of these add-ons :

enter image description here

CSS Usage

enter image description here

Dust-Me Selectors

Improve this answer

2 Comments

@Reddy : I added an option for Chrome
@Reddy : I knew that... but judging by your comment, I guess it wasn't obvious... which is why I added more info + an option for Chrome. So thanks for pointing that out!
-1

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).

Improve this answer

1 Comment

Yes you are right, it's really hard, that's why I thought maybe there's a program can do this easier. thanks for your reply

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.