How To Namespace Or Prefix Semantic UI?

Question

Can anyone help me in how to namespace(prefix) everything in Semantic UI for example prefix "button" class to "my-prefix-button" class?

Also, will this modification affect the JavaScript modules work? For example Accordion, Modal, Popup and all the other modules, if the answer is yes then how to fix it?

Please if you want to use Less or SASS in your answer to achieve that, detail your answer step by step because I am really new to these two fields.

Answer 1

Even I picked another answer to my question(because my question talking about another kind of prefixing and currently that is impossible and the reason in the answer that I picked) but here is what I did to prefix it and it worked for me.

I used less to namespace it with another class like the following:

.my-class {
  @import (less) url("button.min.css");
  @import (less) url("message.min.css");
  @import (less) url("form.min.css");
  @import (less) url("table.min.css");
}

Answer 2

I've already mentioned in the comments that this is impossible, but I've meanwhile found an official statement from the author regarding this, so I'll copy it here for the sake of closure to this question:

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.