Replace b {..} with a more specific selector? (migrated from lighthouse)

like this editor for the comments form, read your initial <b> and only stopped here , I hope. if github use the OOCSS template this would be a mess

Reported by cfenzo | May 12th, 2009 @ 08:12 AM

Since the single selector b is used for selecting the extra rounded corners markup, all use of the <b> tag in it's original use fails miserably unless the css is overwritten for certain areas.

While the inability to use <b> in other contexts certainly isn't a problem for most front-end developers, we aren't the only ones writing content for the sites we develop (quite often we don't even touch the content). The content could (and proberably will) be generated by a variety of sources: directly from users, developers, management, through a CMS or news aggregator. Thus resulting in malformed content whenever a <b> is present.

So, my suggested solution is to add a few bytes and avoid obvious content-problems, like so:

.top, .bottom, .tl, .tr, .bl, .br {display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}

Yes, it will make the selectors for the module skins a bit longer, but that's a small price to pay for the added unobtrusivity (is that even a word?) :)

Nice OOCSS aproach, btw :) Cheers!

What tag would you suggest people use (span, div, b, and i come to mind as options)? I like because I can do getElementsByTagName and scoop up all my corners in one go. Or do you mean that I should leave it open to be any tag?

Ok, I see what you mean. Always specify the class name. We should make this change since B is probably going to be part of HTML5. Do you want to make the change and send a pull request?

Yes i see that you give to b b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;} and i work with some editor that still use the for bold. That would be a big problem and if it's going to be used in html5 will be a huge problem.

May be the span, would be better, something like. .top, .top span, .bottom, .bottom span

I have replaced the tag name with class name in the selectors. So you are free to use any tag. Just pull - and have a look at my forms too. Feedback welcome :)

levito, can you point me to the commit where you changed this?

I like the extra class name, then people can use a span, div, b, or whatever fits their project.

stubbornella / oocss

Replace b {..} with a more specific selector? (migrated from lighthouse) #13