ovidiuch
commented
9 years ago Just to be sure I understood, is Bootstrap overriding/adding attributes to some of the CSS classes used by ComponentPlayground?
However, a pragmatic thing to do would be to use something like BEM to ensure that styling of playground is not affected. What do you think? If you're fine with that I can prepare a pull request.
Sounds like a good idea. I made sure the playground don't affect styles from the loaded component, but I guess it's hard to prevent the opposite without explicit namespacing.
It would be cool if it could be done as a build step. Like having the source intact and then namespacing everything when bundling. But since you need to set proper classes in JSX as well it might be complicated.
It might also be a good idea to try local CSS, but to be honest I haven't been able to read and understand how it works yet.
If none of the two alternatives offer a more elegant solution than just adding a BEM-like namespace, I'm for it.
Continuing on the idea of injecting external styles into cosmos (https://github.com/skidding/cosmos/pull/142), I stumbled across a problem with styling of the playground component with Bootstrap injected. It is of course more an issue with Bootstrap global CSS than anything. However, a pragmatic thing to do would be to use something like BEM to ensure that styling of playground is not affected. What do you think? If you're fine with that I can prepare a pull request.