Conflict with bootstrap class .close. #101

Open
elfet opened this Issue Jan 18, 2013 · 18 comments

Projects

None yet
@elfet

It have conflict with Bootstrap class ".close".

@ccampbell
Owner

Could you be more specific? What is the problem?

@clexit

Just run into this problem too.

When Rainbow beautifies HTML code it wraps > symbol in a span with a close CSS class. Twitter Bootstrap has this class too, thus beautified code looks like this:

close

@ccampbell
Owner

Ah! Interesting. I can update the tags to be something other than open and close but I wonder what other name would be appropriate.

Does Bootstrap define all of their css class rules at the root level? I feel like they should probably have them namespaced like .bootstrap .close or something?

@ccampbell
Owner

I would argue it is a bug on their end considering they assume that everything with class close should be a close button when in rainbow it is pre .close that would match if you wanted to style it.

That being said, bootstrap is the biggest project on GitHub so it is unlikely that is going to get changed.

@elfet

I solved it by forking bootstrap add rename .close class.

@shenhf

Is there any patch, I meet the problem too.

@ghost

Same issue here.

@clexit

Bootstrap is designed to be very easy to use, that's why they use short class names and presume that everything with close class is a close button.

Since they are not going to change it (probably) and people still have this problem, and rainbow generates it's code, maybe it would be better to change to css classes with rainbow- prefix, for example, like in BEM methodology, to prevent any conflicts?

So it would be rainbow-close

@jblashill

Totally agreed that bootstrap is in the wrong here applying styles to .close but I simply worked around it with my own css. Here it is just in case someone finds it useful: (you may need to tweak it depending on your theme)

.rainbow .close {
    float: none;
    font-size: 13px;
    font-weight: normal;
    text-shadow: none;
    opacity: 1;
}
@bmsatierf

Thank you @jblashill

@bbirand

@jblashill 's fix is a decent one, but I'm surprised how this issue lasted for this long. @clexit 's comment on changing the classes to rainbow- is prob the best option. The sad truth of the matter is that many people that will use rainbow, also have bootstrap in some form.

@lunaru

Looks like this thread has died down somewhat, but +1 on rainbow- prefix

@jpdevries

👍 on rainbow- prefix but even more so, I think the larger issue at hand is selectors like pre or pre code in the theme CSS files are too loose.

If you use <pre> or <code> outside of rainbow, it will muck up your site styles. Isn't that silly? Seems like rainbow should require being wrapped in a .rainbow selector or utilize Scoped CSS in some way.

@kswope

The classes that rainbow inserts into the pre tags are crazy common and general. "string", "keyword", "close", "comment". How could these not conflict with other sources, whether its a hugely popular framework or just somebodies little css file?

@ccampbell
Owner

@kswope it is because I am applying them only inside of a pre tag. Please look at the code before throwing out an accusation 😄

https://github.com/ccampbell/rainbow/blob/master/themes/monokai.css

@kswope

That keeps you from polluting other css, but it does nothing to prevent other css from polluting yours!

Another thing to think about. Some css selectors, like from frameworks like bootstrap, is chosen to be easy for users, so they have priority over css that is inserted into the DOM programmatically. The css inserted by rainbow could have been random strings and it wouldn't even matter.

Now, because it looks like you are taking a stand on principals or something, using rainbow is too hazardous! Every time I add some new css, mine or third party, I have to double check that its not screwing with rainbow.

@inclusiv1

I used the following, similar to @jblashill

pre .support.close {
    float:none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-shadow: none;
    opacity: 1;
}

This will basically inherit, but some inherited stuff might not work and again you will need to override depending on your theme.

@jonmilner jonmilner referenced this issue in PrismJS/prism Mar 31, 2016
Closed

Namespace/prefix all the classes? #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment