Duplicate CSS ID's and Classes

[flycast]

I have a site that has about 12 css files that control the layout. A maximum of three css of those CSS files are used on any one page.

The problem is that I discovered (to my dismay) that I duplicated some class and id's for the same element in different files.

What I am looking for is a utility that identifies all the classes and id's a site has and lists what files each descriptor is found in. I am wanting to identify all the duplicates so I can clean them up.

Does anybody know where I could find such an animal?

Thanks,
Eric

[tedster]

I've never seen a dedicated utility for this. I use a text editor that can search several files at once, and just go through the classes and IDs searching all my css files.

[jessejump]

In MSWord, you can insert all the files into one file and then Find within that file.

[Don_Hoagie]

Or just put them together in your text editor and hit Ctrl+F.

Eric, I assume you came across this because your CSS was not behaving the way you wanted it to on certain pages? How did you find out you were replicating classes and ids?

I know of no utility. I must say, 12 stylesheets seems a little overboard... what kind of site is this? I would imagine that if you have 12 different stylesheets, they can't be that large... I think you'll have to just read through them all.

Edit: Now that I think about it, the time and effort put forth to find and execute such a utility is probably more than if you would just look through the files manually.

[Edouard_H]

You could run the problem pages through the W3C CSS Validator and copy the results into the editor of your choice - then hunt for redeclarations and overwritten attributes....

[flycast]

Thanks for all your suggestions.

My stylesheets are arranged in the following way:

I have one sheet to take care of the basic shape of the site. It's a centered box with a gray backround and certain font.

From there the site splts into two different styles one for one side of the company, another for another side of the company. This is two different stylesheets as each side of the company has a different color scheme.

Lastly, each page has it's own styling so each page has it's own stylesheet. That's why it totals up to twelve. It actually sounds overboard but makes a lot of sense if you saw the way the stylesheets are divided.

If I can't find a utility for this I think I will roll my own in VB.NET or PHP.

Again, thanks for your suggestions!

[wickydoodah]

TopStyle Pro (a CSS editor by Bradbury Software) will do what you need quite nicely. It can search through your entire site and create a list of which pages your ID's and classes are used on. It will also find orphan ID's and classes (styles that have never been used anywhere in your pages) or styles that redefine/repeat attributes for the same element. I've used it many times to clean up style sheets, particularly after a major overhaul of a site that used multiple style sheets. Do a Google search for "TopStyle" to learn more about it.

Hope that helps...

[flycast]

I already have TopStyle. I was not aware of that feature. I *kinda* has what I am after. I can probabally track it down from there. Thanks.

I like TopStyle but do have problems with it's preview feature. Doesn't update properly. I've reported it. Bradbury doesn't see that it is a bug. I am waiting for the next version, hopfully they correct it.