如何显式地而不是全局地应用 UI 框架？答案

【问题标题】：How can I apply a UI framework explicitly rather than globally?如何显式地而不是全局地应用 UI 框架？
【发布时间】：2015-11-21 05:32:56
【问题描述】：

我想在 Wordpress 插件中为管理后端使用 UI 框架。不幸的是，大多数框架全局而不是显式地应用许多样式。这些全局重置和覆盖对于从头开始构建的网站非常有效，但在实施到现有架构（如 Wordpress 后端）中时可能会造成严重破坏。

我正在寻找一个 UI 框架，它 (1) 设计或 (2) 可以覆盖以仅应用于页面的给定区域例如通过父 div 上的类名。这将允许我将框架应用到我的特定选项区域，同时保持后端的其余部分保持不变。

我最近开始使用 YUI 的Pure.css，它有一个几乎不存在的全局重置与显式类配对，所有这些类都以“纯-”前缀开头。但是，这个框架比我想要的要轻一些。我正在寻找一些功能更丰富的东西，比如 Bootstrap 或 Semantic UI。

【问题讨论】：

【解决方案1】：

例如，您可以为 Bootstrap 添加前缀，无论是使用 less 处理它，还是使用此工具 http://www.css-prefix.com/ 自己为它们添加前缀，因为这适用于任何框架

你会需要这样的东西

.yourpluginname-bs {
  @import (less) url("bootstrap.css");
}

【讨论】：

这让我走上了正轨。然而，那个 css-prefix 站点被严重破坏了。它在某些规则中间的换行符和逗号之后添加了许多额外的前缀。 LESS/SASS 似乎是要走的路……除了一个例外，html 和 body 标记，它们不会被包装在我的包含 div 中。我将不得不手动搜索并重写任何此类引用。
@Matt 我建议谨慎行事，这会导致 css 相当臃肿。我会尽量使包装器 css 名称尽可能简洁。
@Matt，Zachary 就在那里，通常你不想要一个带有许多字符的前缀，像 mp-bs 而不是 myplugin-bs 这样的缩短版本可以节省一些 kb。