css development tool idea

I am making a modification to an existing stylesheet. Initially, I had

.formlayout p.otheropts {
	clear: left;
	padding-left: 120px;
	margin-left: 10%;
}

.formlayout p.otheropts strong {
	color: #cc6402;
             font-weight: bold;
}

But it appears that the font should be bold in all instances. Rather than slapping <strong> tags around everything, I was going to modify the base style to include the font-weight. However, that would mean setting <strong> would only change the color of the font, not the weight itself. That doesn’t seem semantically correct! I think I am going to change <strong> to <em> because I believe that’s more semantically correct. (Sure, that could be debated). However, now I need to find where I’ve used <strong> tags within the otheropts class.. a global search for <strong> will bring up lots of false positives.

So.. here is my idea, and perhaps something that navigates through the DOM tree would do it. A tool that enables you to set the context you’re searching in. As follows:

Insert context: (in this case, otheropts)
Insert specific tag:

Then set something up to getElementsByClassName, grab all instances of otheropts for the entire site, then… hmm, does getElementsByTagName retrieve <strong>? I have no idea.. something to check out…

So that’s my rough idea. I’m sure there’s already something out there someplace…

• Subscribe to the RSS feed
• Get Email updates
• Reading: css development tool idea (by @afhill)Tweet This
• Stumble It
• Add to del.icio.us
• Share on Facebook
• Email to a friend