Any tool to show you all elements/pages in a site that are affected by a particular CSS rule?

Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.

But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?

Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pa开发者_开发百科ges will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.

not exactly that, but there is a firebug plugin that does that for any loaded page:

http://robertnyman.com/firefinder/

You could use regular expressions ..

for example in Dreamweaver on the search dialog box :

1. select 'Find in: Entire current local site.."
2. select 'Search: Source code'
3. check 'Use regular expression'
4. in the find textarea type class\s*?=\s*?".*?content.*?"
5. click 'find all'

the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)

Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..

If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.

To show elements on the html page styled by a given selector:

(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);

(ii) click the X-Ray button off (must read 'Not Active' below the button);

(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);

(iv) now click 'inspector' on the mark-up page (next to 'X-ray').

Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.

For this kind of things I just use grep, or - even better, ack. If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)

How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?

Like this:

#mypage .description,
#myotherpage . description {
}

Cons:

• Must put a body ID on each page / template.
• Must specify each page the CSS should apply to. More CSS code to manage.
• Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).

Pros:

• Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
• See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
• Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.

I agree with this statement, made by a friend:

"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for each page, and some global CSS.)" - Olav Bjørkøy, original creator of the Blueprint CSS framework

I'd love your input on this, or if any of you have found a better way.