What is the method in Firebug to find out the CSS files causing class name clashes?

Question

The same class being declared in a large number of CSS files imported on a webpage makes it very difficult locate the clash manually. The same class name could have been declared differently in two different CSS files, causing the class definition in one style sheet to supercede the class definition in other style sheet.

What feature of Firebug allows you to find out the conflicting class names and the CSS files that declare them?

Answer 1

It is totally normal that different CSS files include rules with overlapping selectors. The precedence of the values is defined within the CSS Selectors specification and is specified by their so-called "specificity".

How the different CSS rules got applied to result in the specific computed CSS values can be seen within the Computed side panel of Firebug. You just need to expand the related property there and you'll get a list of all selectors and related values sorted by their specificity with the one that "won" at the top. At the right side of each entry you'll find the file name and line number where the related CSS rule is defined.