Semantic-ui: [Question] Using Semantic UI as a 3rd party

[mxth]

I try to isolate semantic code (js and css) from the host environment. For the js part, it can be done by using AMD loader (like RequireJS) and jQuery noConflict mode.
And for the css, I want to prefix every class with a namespace, so in the host page, popup class would be "x-ui x-popup". How to do that with the current build tool?

[jlukic]

There's no need to prefix the css classes. Everything is namespaced already to ui. Unless your code has other ui button or ui menu rules it will not conflict with any other site code.

[mxth]

I think it doesn't cover all the cases. For example, if in the host page, they define have the class

.button {
    background-color: black;
}

And we don't override it in our ui button, it still affects our ui button, right?

[mxth]

There's also the case that the host page uses Semantic UI as well, and most likely it will be different (version, modified, themed) from the Semantic UI of 3rd widget. Thus, to make no assumption about the host page, my only solution is prefixing every classes.

[jlukic]

I don't plan on releasing anything like this.

Part of the goal of Semantic is simplifying front end codebases. This would be another step towards obfuscation. It may be a requirement for certain use cases, but I don't think I want to convince developers this is a necessary path for interoperability.

[MohammedAl-Mahdawi]

Can you please add an option in your build tools allow us to prefix everything in Semantic UI?
Because I got a lot of conflict when I used it with another library like jQuery UI.

[iPaoo]

+1

[jlukic]

I don't have any plans to add an option like this. I wouldnt recommend using SUI with bootstrap or any other monolithic UI library.

[diego-vieira]

http://stackoverflow.com/questions/13966259/how-to-namespace-twitter-bootstrap-so-styles-dont-conflict?answertab=active#tab-top

[NenadP]

This would be very useful especially for the project with lots of legacy classes that could collide with Semantc. Actually Ithat would be step towards flexibility and a powerful feature, if implemented as an option I don't see how it damages Semantic UI philosophy.

[siansell]

+1 for this, I like to use SUI React, but a lot of work to integrate such components into existing websites when the css clashes.