Block CSS collide with CSS rules already defined in template

For block specific styles I'd recommend just using style tag

content: `
<section class="big-hero">...</section>
<style>
  .big-hero{...} ....
</style>
`,

If you want to preload external stylesheet inside the canvas

var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});

Hi @artf

When using <style> tag to define styles inside the 'content', after the block is dropped on the canvas, the css rules of the block overrides those of the elements that already in the canvas with the same selector. For example, if the block has the following rules .class1{ color: #fff; } After the block is added, the other elements not inside the block that also have the 'class1' will also have the color changed to white

Even after I removed the newly added block, the new styles still exists

Any quick way to limit the scope of the block CSS to that particular block only? Or I need to update every selectors to prevent this happening?

Originally posted by @charlieshum1 in https://github.com/artf/grapesjs/issues/195#issuecomment-490852070