Issue #2363Opened October 31, 2019by CatalinCernea2 reactions

[QUESTIONS] Is there a quick way of renaming CSS classes on export?

Question

Hi,

since we wanna export the generated HTML and CSS and integrate it in a separate website its very probable to have CSS classes with same name and could lead to UI problems. We're thinking in renaming them after export and add a prefix on each class but don't know how to achive this or if it's a good thing.

Has anyone got similar scenarios and how you solved it?

Answers (3)

devmohitagarwalNovember 1, 20192 reactions

HI @iColdoCatalin , We faced the same issue and overcame this by sandboxing the css.To do so, I used sass.js (https://github.com/medialize/sass.js/)

Steps:

  1. enclose the cssString with your custom class. say MyCustomClass.
  2. Run sass.compile from the above library to convert the scss to css which is now sandboxed with the class give,

This way you wont face the issue of conflicts.

Keep me posted because we have done much more than that(We replaced the IDs with class as well)

artfNovember 2, 20190 reactions

Thanks for the suggestion @devmohitagarwal not bad as the approach. In any case, I'd prefer moving all the discussion about namespacing CSS in export here so I'd close this issue

CatalinCerneaNovember 4, 20190 reactions

HI @iColdoCatalin , We faced the same issue and overcame this by sandboxing the css.To do so, I used sass.js (https://github.com/medialize/sass.js/)

Steps:

  1. enclose the cssString with your custom class. say MyCustomClass.
  2. Run sass.compile from the above library to convert the scss to css which is now sandboxed with the class give,

This way you wont face the issue of conflicts.

Keep me posted because we have done much more than that(We replaced the IDs with class as well)

Thanks for the help @devmohitagarwal @artf . Much appreciated. I'm going to try out both solutions and see witch one fits better for us. I'll text you if I need more help ;)

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.