Namespace CSS?

do you think you could just prefix all class names generated by grapejs? if instead of .row you use .grape-row or whatever (i'd probably make the prefix a variable), you'll mostly get the effect that @tomichal is after.

Actually, you can add a listener on new selectors and add a prefix there

    const prefix = 'myprefix-';

	editor.on('selector:add', selector => {
		const name = selector.get('name');

      	if (selector.get('type') === editor.SelectorManager.Selector.TYPE_CLASS && 
			name.indexOf(prefix) !== 0) {
			selector.set('name', prefix + name);
      	}
    });

HI, People looking to sandbox, prefix the exported CSS can give this a try, we had the same use case and took the sass approach.

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 given() ,

This way you wont face the issue of conflicts.

This answer was copied from another question. #2363