Epicserve

Managing Orphaned CSS

March 25, 2005 | 4:23 p.m. CST

I was thinking today and wondering if there is a good way to deal with orphaned CSS and orphaned class and id tags in your XHTML code. So what do I mean by orphaned CSS and orphaned class and id tags?

Well think about all the websites that you develop and all the code you type from day to day when working on a website. During the coarse of the a websites development you or someone on your team is bound to create a CSS selector in your style sheet that ends up not having a XHTML class or id associated with it and then therefore becomes orphaned. Or it could be the other way around in that you create a class or id in your XHTML document that never had a CSS selector associated with it or it had one at one time and then it was deleted.

So why does this matter and why is this even that big of a deal. I suppose in the grand scheme of things it probably doesn't matter that much because the amount of orphaned code that is in a typical website probably doesn't amount to enough to slow down the downloading time of your documents that much. However, for the sake of code clarity and keeping the code pure and pristine it matters a lot. If you don't have any orphaned code then you know what everything has something related to it and therefore your code and project becomes cleaner and more organized.

So my question is, has anyone else thought about this and if so is there a good way to keep track of all your CSS selectors and XHTML classes and ids so they don't become orphaned?

Related tags: CSS

Comments

Jeff Croft
1.   At 9:08 a.m. CST on March 28, 2005, Jeff Croft wrote:

Interesting topic.

First off, I don't think there is a problem with an "orphaned" id or class in your XHTML file if you're using them properly. Any id or class that has been put in your XHTML should have been put there to give the document more meaning. A div with an id should have been put in to group a section of elements together. A class should have been put in to identify an element as being different from other elements with the same name. In other words, I don't think we should look at classes and ids solely as hooks to hang CSS on, but rather as descriptive elements of our XHTML documents. Whether or not they have associated CSS is irrelevant.

On the flip side, there probably shouldn't be CSS selectors in your stylesheet that have no associated id or class in the XHTML. The one exception I can think of is if you had a style set up for something that wasn't currently used, but may be used in the future.

In any case, I'm not sure how to go about cleaning up all your orphans, other than just searching them down and deleting them manually. it would be nice if there were a tool to do this for you, but I don't know of one. :(

Brent O'Connor
2.   At 10:02 a.m. CST on March 28, 2005, Brent O'Connor wrote:

Jeff, basically what you're saying is... you shouldn't have orphaned anything if you are coding right. I agree with that totally. However, we are human and make mistakes and we re-use code from other projects, etc. So since it's bound to happen it would be nice to have a tool to help the orphans find their homes or just cap the orphans totally! :) We need to cap those orphans! :)

Jeff Croft
3.   At 10:40 a.m. CST on March 28, 2005, Jeff Croft wrote:

Yep, that's what I'm saying, and yep, you are correct -- orphans are bound to happen. It would be nice to have an easy way to get rid of them, for sure.

Milan Negovan
4.   At 10:52 a.m. CST on March 30, 2005, Milan Negovan wrote:

It's possible to automative hunting for CSS "orphans." Some kind of a bot would need to traverse your entire app and collect all ids and classes. It sure is doable unless there are unreacheable sections of a web app or ones that require authentication.

Brent O'Connor
5.   At 2:40 p.m. CST on March 30, 2005, Brent O'Connor wrote:

Milan, Good point. I wonder if anyone has made a tool like this? If not I might have to make one in my spare time. Wait, what spare time. :)

Comments are closed.

Comments have been close for this post.