SnappySnippet

我终于找到了一些时间来创建这个工具。您可以从 Github安装SnappySnippet
。它允许从指定的（最后检查的）DOM 节点轻松提取
HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。享受！

其他特性

• 清理 HTML（删除不必要的属性，修复缩进）
• 优化 CSS 使其可读
• 完全可配置（所有过滤器都可以关闭）
• 使用::before和::after伪元素
• 漂亮的 UI 归功于Bootstrap和Flat-UI项目

代码

SnappySnippet 是开源的，你可以在 GitHub
上找到代码。

执行

由于我在制作这个过程中学到了很多东西，所以我决定分享一些我遇到的问题以及我的解决方案，也许有人会觉得它很有趣。

第一次尝试 - getMatchedCSSRules()

起初，我尝试检索原始 CSS 规则（来自网站上的 CSS
文件）。非常令人惊讶的是，这非常简单window.getMatchedCSSRules()，但是，它并没有很好地工作。问题是我们只采用了在整个文档的上下文中匹配的
HTML 和 CSS 选择器的一部分，而在 HTML 片段的上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，所以我放弃了这个尝试。

第二次尝试 - getComputedStyle()

然后，我从@CollectiveCognition 建议的东西开始 - getComputedStyle()。但是，我真的想将 CSS 与 HTML
分开，而不是内联所有样式。

问题 1 - 将 CSS 与 HTML 分开

这里的解决方案不是很漂亮，但很简单。我已将 ID 分配给所选子树中的所有节点，并使用该 ID 创建适当的 CSS 规则。

问题 2 - 删除具有默认值的属性

为节点分配 ID 效果很好，但是我发现我的每个 CSS 规则都有大约 300 个属性，这使得整个 CSS 不可读。
结果getComputedStyle()返回为给定元素计算的所有可能的 CSS
属性和值。其中一些是空的，一些有浏览器默认值。要删除默认值，我必须首先从浏览器中获取它们（每个标签都有不同的默认值）。解决方案是将来自网站的元素的样式与插入空的相同元素的样式进行比较<iframe>。这里的逻辑是
empty 中没有样式表<iframe>，所以我添加的每个元素都只有默认的浏览器样式。通过这种方式，我能够摆脱大多数无关紧要的属性。

问题 3 - 只保留速记属性

我发现的下一件事是不必要地打印出具有速记等效项的属性（例如，有border: solid black 1px，然后border-color: black;，border-width: 1pxitd。）。
为了解决这个问题，我简单地创建了一个具有速记等效项的属性列表，并将它们从结果中过滤掉。

问题 4 - 删除前缀属性

在之前的操作之后，每个规则中的属性数量明显减少，但我发现我有很多-webkit-我从未听说过的前缀属性（-webkit-app- region？？-webkit-text-emphasis-position）。
我想知道是否应该保留这些属性中的任何一个，因为其中一些似乎很有用（-webkit-transform-origin等-webkit- perspective-origin）。不过，我还没有弄清楚如何验证这一点，而且由于我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除。

问题 5 - 组合相同的 CSS 规则

我发现的下一个问题是相同的 CSS 规则一遍又一遍地重复（例如，对于每个<li>具有完全相同的样式的 CSS 输出中创建的规则相同）。
这只是一个相互比较规则并将具有完全相同的一组属性和值的规则组合起来的问题。结果，#LI_1{...}, #LI_2{...}我得到了`#LI_1,

LI_2 {…}`.

问题 6 - 清理和修复 HTML 的缩进

因为我对结果很满意，所以我转向了 HTML。它看起来像一团糟，主要是因为该outerHTML属性保持它的格式与从服务器返回的完全相同。
唯一outerHTML需要的 HTML 代码是简单的代码重新格式化。因为它在每个 IDE 中都可用，所以我确信有一个 JavaScript
库可以做到这一点。事实证明我是对的 (jquery-clean)。更重要的是，我有多余的属性删除（style等data-ng-repeat）。

问题 7 - 过滤器破坏 CSS

由于在某些情况下，上面提到的过滤器可能会破坏片段中的 CSS，因此我将它们全部设为可选。 您可以从“设置” 菜单中禁用它们。