Colisión CSS por bloques con reglas CSS ya definidas en plantilla

Para estilos específicos de bloques recomendaría usar simplemente la etiqueta 'style'

'''js contenido: ' <sección clase="grande-héroe">...</section>

<style> .gran héroe{...} .... </style>

`,

Si quieres precargar una hoja de estilo externa dentro del lienzo

'''js
var editor = grapesjs.init({
  ...
lienzo: {
estilos: [
'https://...',
      ...
    ]
  }
});

Hola @artf

Al usar <style> etiqueta para definir estilos dentro del 'contenido', después de que el bloque se deja caer en el lienzo, las reglas CSS del bloque anulan las de los elementos que ya estaban en el lienzo con el mismo selector. Por ejemplo, si el bloque tiene las siguientes reglas '.clase1{ color: #fff; }` Después de añadir el bloque, los otros elementos que no están dentro del bloque y que también tienen la 'clase 1' también cambiarán el color a blanco

Incluso después de eliminar el bloque recién añadido, los nuevos estilos siguen existiendo

¿Hay alguna forma rápida de limitar el alcance del CSS del bloque solo a ese bloque en particular? ¿O tengo que actualizar todos los selectores para evitar que esto ocurra?

Originally publicado por @charlieshum1 en https://github.com/artf/grapesjs/issues/195#issuecomment-490852070