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.

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.

• javascript
• jquery
• css
• semantic-ui

Share Improve this question Follow edited Aug 9, 2015 at 11:40 Harry 89.9k2626 gold badges214214 silver badges223223 bronze badges asked Aug 9, 2015 at 11:01 Engr.MTHEngr.MTH 1,05411 gold badge1111 silver badges2424 bronze badges 4

• I have removed the thanks note as it is considered as fluff and is not required. I have also made a few other minor edits to the content. – Harry Commented Aug 9, 2015 at 11:40
• 1 I just looked at the LESS sources and, unfortunarely, Semantic UI doesn't offer a way to do this. Perhaps you could share your use case with us so that we can offer some possible alternative. – fstanis Commented Aug 9, 2015 at 18:19
• @fstanis Thank you. I just created a form for my WordPress plugin using Semantic UI and and I liked it and I decided to use all the Semantic UI ponents in my plugins but when I switched my theme I got shocked! everytime I switch my theme the form style change! I think becase Semantic UI doesn't offer this functionality I'll looking for another css&js framework. – Engr.MTH Commented Aug 10, 2015 at 11:52
• 1 I've added an answer with jlukic's (author and lead developer of Semantic UI) stance on this and his reason for not including this feature. Since Semantic UI is a lot more than just a CSS & JS framework, if you just want to make your forms simple & clean, you might want to check out Pure CSS. – fstanis Commented Aug 11, 2015 at 13:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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");
}

I've already mentioned in the ments 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.