：支持没有预定义CSS结构的现有HTML页面的复杂度估计？

Question

我有大量静态网站，有些是很久以前开发的（用Bootstrap等），有些是最近开发的（用CSS Grid等）。有些使用内联样式，有些使用基于类的样式，有些基于组件层级（例如“#id > div > ul > li”），有些则直接通过 html 组件名样式（例如 'form'），还有些则结合这些元素。

我相信 Grapes 只支持类似 BEM 的 CSS 样式。也就是说，每个组件都有自己的类。这是正确的吗？

此外，这些静态站点中有些依赖于大型CSS库，比如Bootstrap，我想把它们传递到'grapes.init'的'style'属性里。实现这一点会非常有挑战性吗？

我要内置支持任意CSS样式会有多复杂？这需要彻底改造吗？还是说其实可以比较容易地完成？你能给我一些正确的方向吗？

tommedema · Accepted Answer

@artf谢谢，我明白了。我其实很喜欢你依赖浏览器的CSS解析器，因为我已经注意到大模板的性能问题了。如果你还依赖Postcss，我担心性能可能会进一步下降。

我目前正在用各种模板测试葡萄。我会整理一份关于小提琴的问题清单。

大多数渲染问题源于文档类型未被应用，但也有一些其他问题。有些功能问题，比如如果你复制了一个组件，然后更改它的样式，原组件的样式也会被调整。这似乎是因为 Grapes 是调整原始类，而不是针对你选择的组件内联编辑样式。

我也希望自己能有所贡献，所以首要目标是听听你们对每个问题的见解，然后希望我能帮忙解决。

我先关闭这个问题，等有例子后再重新打开。

artf · Answer

我相信 Grapes 只支持类似 BEM 的 CSS 样式。也就是说，每个组件都有自己的类。这是正确的吗？ 是“选择器/类查看器”，只能让你编辑基于类的选择器的样式，比如“.class1” “.class1.class2”，但GrapesJS应该能顺利导入你所有的规则此外，有些静态站点依赖于像 Bootstrap 这样的大型 CSS 库，我想把这些库传递到 grapes.init 的 style 属性中。实现这一点会非常有挑战性吗？ 你可以用这种方式加载外部内容 “''js const editor = Grapesjs.init（{ ... 画布：{ 斯泰尔斯：['...file1.css，'......file2.css'，'...'] 剧本：['...file1.js，'......file2.js'，'...'] } }); ```我要内置支持任意 CSS 样式会有多复杂？ 你说的“任意 CSS 样式”具体指什么？

tommedema · Answer

@artf 谢谢你的回答！我觉得我可能需要详细解释一下我的使用场景。 并不总是指望导入模板的人能定义来自外部库的CSS。原因在于CSS通常会被编译并压缩成一个捆绑包。因此，引导规则等将与该HTML页面的规则合并。因此无法定义哪些文件应该单独导入。 我说的任意CSS样式是指用CSS选择器为HTML元素做样式的不同方式集合（类、原生HTML元素与内联等）。 到目前为止，我注意到我当前模板在 Grapes 编辑器中渲染错误的三个原因：模板的文档类型被忽略;HTML4 模板的渲染方式与 HTML5 不同，因此导入模板时应保留或定义文档类型（HTML + CSS + doctype 代替 HTML + CSS）封装器上方定义的所有类和样式信息都被忽略，例如具有以下结构的模板： 不会按应有的样子渲染，因为模板的 html 和 body 元素中定义的类丢失了。Grapes 向我的模板注入了 CSS，影响了它的渲染方式，其中有些 CSS 是多余的。例如，它强制设置为“margin： 0”，尽管原始模板并不依赖于重置边距。这会导致模板在编辑器内的渲染方式与普通浏览器窗口不同。幸运的是，删除不必要的CS...

：支持没有预定义CSS结构的现有HTML页面的复杂度估计？

问题

回答（3）

相关问答

在画布内添加自定义HTML

有没有自定义样式可以添加或移除自定义职业？

StyleManager - SectorsView - addToCollection（）使用“name”属性构建 ID，但因多个空格或特殊字符而失败

：在 grapesjs.init 中加入组件

与此问题匹配的付费插件

相关教程

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

浏览插件分类

问题