¿estimación de la complejidad para soportar páginas HTML existentes sin una estructura CSS predefinida?
@artf gracias, ya veo. De hecho, me gusta que dependas del analizador CSS del navegador porque ya estoy notando problemas de rendimiento con plantillas grandes. Si también dependes de algo como postcss, temo que el rendimiento pueda degradarse aún más. Actualmente estoy probando uvas con una gran variedad de plantilla...
Lee la respuesta completa abajo ↓Pregunta
Tengo una gran cantidad de páginas web estáticas, algunas que se desarrollaron hace bastante tiempo (usando Bootstrap, etc.) y otras que se han desarrollado más recientemente (usando CSS grid, etc.). Algunos usan estilos en línea, otros usan estilo basado en clases, algunos se basan en la jerarquía de componentes (por ejemplo, '#id > div > ul > li'), algunos estilizan inmediatamente los elementos por el nombre del componente html (por ejemplo, 'form'), y otros usan una combinación de todos estos.
Creo que Grapes funciona únicamente con un estilo CSS tipo BEM. Es decir, cada componente tiene su propia clase. ¿Es correcto?
Además, algunos de estos sitios estáticos dependen de grandes librerías CSS como Bootstrap, que me gustaría pasar a la propiedad 'style' de 'grapes.init'. ¿Sería muy difícil de lograr?
¿Qué tan complejo sería para mí integrar soporte para un estilo CSS arbitrario? ¿Es esto algo que requeriría una revisión completa o podría hacerse relativamente fácilmente? ¿Podrías darme algunos consejos en la dirección correcta?
Respuestas (3)
@artf gracias, ya veo. De hecho, me gusta que dependas del analizador CSS del navegador porque ya estoy notando problemas de rendimiento con plantillas grandes. Si también dependes de algo como postcss, temo que el rendimiento pueda degradarse aún más.
Actualmente estoy probando uvas con una gran variedad de plantillas. Voy a elaborar una lista de problemas con los violines.
La mayoría de los problemas de renderizado vienen del hecho de que no se aplican doctypes, pero hay otros también. Hay algunos problemas de funcionalidad, como que si duplicas un componente y luego cambias su estilo, también se ajusta el estilo del componente original. Esto parece deberse a que uvas ajusta la clase original en lugar de editar estilos en línea para el componente que has seleccionado.
Espero poder contribuir también, así que el primer objetivo sería conocer vuestras opiniones sobre cada problema y, con suerte, poder ayudar a solucionarlos.
Cerraré este problema por ahora y lo volveré a abrir cuando tenga algunos ejemplos.
creo que Grapes funciona únicamente con un estilo CSS tipo BEM. Es decir, cada componente tiene su propia clase. ¿Es correcto?
El "selector/visor de clases" solo permite editar estilos de selectores basados en clases, como '.class1', '.class1.class2', pero GrapesJS debería importar todas tus reglas sin problema
Además, algunos de estos sitios estáticos dependen de grandes librerías CSS como Bootstrap, que me gustaría pasar a la propiedad de estilo de grapes.init. ¿Sería muy difícil de lograr?
Puedes cargar cosas externas de esta manera '''js const editor = grapesjs.init({ ... lienzo: { Estilos: ['... file1.css', '... file2.css', '...'] Guiones: ['... file1.js', '... file2.js', '...'] } });
> ¿Qué tan complejo sería para mí integrar soporte para un estilo CSS arbitrario?
¿A qué te refieres exactamente con 'estilo CSS arbitrario'?
@artf ¡Gracias por la respuesta! Creo que tendré que explicar mejor mi caso de uso.
No siempre es realista esperar que alguien que importa una plantilla defina qué CSS proviene de bibliotecas externas. La razón de esto es que normalmente CSS se compila y minifica en un solo bundle. Así que las reglas de bootstrap, etc., se fusionarán con las reglas específicas de esta página HTML. Por lo tanto, no es posible definir qué archivos deben importarse por separado.
Con estilo CSS arbitrario me refería a la recopilación de las diferentes formas de estilizar elementos HTML con selectores CSS (clases vs elementos nativos de HTML vs inline, etc.)
Hasta ahora he notado 3 razones por las que mis plantillas actuales se renderizan mal en el editor de Grapes:
-
se ignora el tipo de doc de la plantilla; Las plantillas HTML4 se renderizan de forma diferente a HTML5, por lo que los doctypes deben preservarse o definirse al importar una plantilla (html + css + doctype en lugar de html + css)
-
toda la información de clase y estilo definida por encima del envoltorio se ignora, por ejemplo, una plantilla con tal estructura:
<!DOCTYPE html>
<html lang="nl" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml" class="js flexbox canvas no-touch hashchange rgba multiplebgs ...">
...
<body class=" m-nl l-nl página-inicio is-loggedout reinicio índice-página principal ">
No se renderizará como debería porque se pierden las clases definidas en los elementos html y del cuerpo de la plantilla.
- Grapes está inyectando CSS en mi plantilla que afecta a la forma en que se renderiza, parte de este CSS es redundante. Por ejemplo, fuerza un 'margen: 0' aunque la plantilla original no dependiera de un margen de reinicio. Esto hace que la plantilla se renderice de forma diferente dentro del editor que dentro de una ventana normal de navegador. Afortunadamente, esto se soluciona fácilmente eliminando las reglas CSS que no son necesarias.
He pasado 2 días revisando tu código fuente. ¡Me gusta mucho la documentación, el patrón MVC y la estructura con Backbone! Estaría encantado de proponer una solución para conservar esta "información del envoltorio" y crear una PR para resolver esto.
Mi prioridad actual es repasar el código de nuevo para entender completamente el analizador CSS y así responder a mis propias preguntas anteriores. Probablemente encontraré uno o dos números para los que también estaría encantado de crear PRs.
Mi objetivo final es poder importar documentos HTML estáticos (incluyendo doctype y todo el estilo sin saber qué reglas CSS forman parte de Bootstrap, etc., incluyendo CSS minificado, etc.) y que se rendericen en Grapes como lo harían en una ventana normal de navegador.
Ya que sugieres que Grapes debería funcionar ya de fábrica con cualquier tipo de estilo CSS, ¿te parecería idea que vuelva contigo con una plantilla estática de HTML + CSS que renderice mal dentro de Grapes? También investigaré por mi cuenta por qué creo que no se está renderizando como debería (aparte de las 3 razones anteriores).
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1966
[PREGUNTA] Bucle sobre todos los componentes
Hola a todos, Quiero crear un conector para cada botón que añada al lienzo. Esto está funcionando perfectamente. Sin embargo, cuando recarg...
Issue #1477
Problema de compilación de activos en la aplicación de Phoenix en producción por GrapesJS
Estamos usando GrapesJS para permitir que los usuarios diseñen algunas páginas estáticas en nuestra versión de aplicación de producción con...
Issue #811
[PREGUNTA] CSS se elimina
Tengo una página web con varias páginas web (página de resultados, página de categorías, página principal) y un archivo CSS común para toda...
Issue #1329
Pregunta: Cómo usar el mismo CSS para varias páginas
Hola equipo de Grapejs, Hemos estado trabajando en el Constructor de Páginas Web Multipágina. Para cada proyecto habrá varias páginas html...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.