如何为特定 DOM 元素提取 HTML CSS JS：

与 Web 开发人员一样，检查网站源代码进行标记分析可能会很有洞察力。然而，当提取特定部分进行本地评估时，这个过程可能会变得乏味。复制单个元素和关联的 CSS 可能很麻烦，而保存整个源代码只是为了删除不相关的代码，效率很低。

SnappySnippet：实用的解决方案

我开发 SnappySnippet 是为了解决这个问题。这个开源工具可以在 GitHub 上找到，可以轻松地从最后检查的 DOM 节点中提取 HTML CSS 代码。它还提供了与 CodePen 或 JSFiddle 直接共享代码的选项。

SnappySnippet 功能：

• HTML 清理： 删除不必要的属性和改进缩进。
• CSS 优化： 通过简化代码增强可读性结构。
• 完全可配置：用户可以根据需要禁用或启用各种过滤器。
• 伪元素支持：从::before中提取内容并且支持::after伪元素。
• 用户友好的界面：使用Bootstrap和Flat-UI构建直观的用户体验。

实施挑战和解决方案：

创建 SnappySnippet 提出了几个挑战。以下是我克服它们的方法：

获取匹配的 CSS 规则：

最初，我尝试从 CSS 文件中检索原始 CSS 规则。然而，这种方法导致选择器不一致，使得代码提取在 HTML 片段的上下文中无效。

使用 getCompulatedStyle():

我将焦点转移到 getCompulatedStyle() ，但所需的 CSS 隔离仍然难以实现。

问题 1：将 CSS 与HTML

为了将 CSS 与 HTML 分开，我为选定的节点分配了唯一的 ID，并使用这些 ID 来创建有针对性的 CSS 规则。

问题 2：删除默认值

getComputedStyle() 返回元素的所有 CSS 属性和值，包括空值和浏览器默认值。我创建了一个空 iframe 来提取默认样式并从 HTML 代码段中删除无关紧要的属性。

问题 3：仅保留简写属性

我删除了与简写等效的属性增强代码可读性。

问题4：删除前缀属性

过多使用前缀属性（-webkit-等）带来了挑战。我决定消除这些属性，因为它们的相关性不确定并且通常是不必要的。

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

重复的 CSS 规则通过将规则与相同的属性和值，从而产生更紧凑的代码。

问题 6：清理和缩进HTML

我利用 jquery-clean 库重新格式化 HTML 代码，提高可读性并删除不需要的属性。

问题 7：过滤器灵活性

用户可以选择从“设置”菜单禁用过滤器，从而为特定用例提供灵活性。