3

I am trying to streamline my page. Currently I have several CSS files included. I would like to eliminate some CSS includes by getting just a few styles that are used from one large CSS file.

What is the best way to figure out which styles are used from a particular CSS file?

Improve this question
2
  • Go over the file and see everything starting with a . dot? (i.e. .class). Commented Apr 28, 2012 at 17:46
  • CSS classes do not start with a dot withing the document... and the page is quite large. Commented Apr 28, 2012 at 17:49

3 Answers 3

Reset to default
8

In Chrome, you can Audit your page and this will reveal unused rules, including which file they come from. Just press F12 to load up the Developer Tools, click on "Audits," and then "Run".

enter image description here

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

5 Comments

I'm mostly looking for ways of seeing which classes are coming from which CSS file.
@Santa Just about any set of developer tools will show you that. Within Chrome or Internet Explorer, hit F12 and inspect the CSS properties of any given element.
Bingo! This is exactly what I was looking for. I got this: mystyles.css 7.20KB (81%) is not used by the current page. Now I can figure out what is used and combine them. :)
@santa From within Chrome, right click on any element and select "inspect element", then look at the styles pane on the right. It will show you the used rules, and file.
Actually i think it lists all UNUSED styles. Great, I can just copy CSS, remove the ones listed as UNUSED and merge used into one css file!
0

Just press F12 to load up the Developer Tools then click on 'Elements' on top-left corner. Now click anywhere below it and press Ctrl+F, it will open find dialog box. Type class in it. It will show where class word is used to define classes in page in yellow background. Clicking on that yellow word displays class details on left side. Copy all classes to a notepad.

Improve this answer

Comments

0

All modern browsers are supplied with developer tools. Most of them allow you to Inspect an element via the right-click menu. There you will see the stylesheets that give this or that html element the styles (even with line numbers in the stylesheet). I know that there is an extension for Opera (https://addons.opera.com/en/extensions/details/dust-me-selectors-for-opera/) that checks your CSS for empty (unused) selectors, and I'm sure there are other plugins or extensions for other browsers as well.

Improve this answer

Comments

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.