CSS类的名称空间/前缀，在Javascript和CSS之间共享

我正在编写一个可重用的Javascript代码段（jQuery插件），其中涉及DOM CSS样式。因为它应该是任何人都可以使用的，所以我希望避免它的CSS类名和文档中其他现有类之间的冲突。这就是为什么我使用名称空间字符串作为其所有类名的前缀（例如，如果我的前缀是

prfx-

，则class

grid

将变成

prfx-grid

）。为了尊重DRY，并使其易于更改，我只想声明我的前缀一次，并从CSS电子表格（可能使用Sass）和Javascript代码访问它。如果可能的话，我还希望只使用2个文件（my.js和my.css）

有没有一种方法可以声明这样一个前缀/名称空间常量，以便可以从CSS和Javascript访问它？

我不知道有什么简单的方法可以在一个地方定义它。它非常简单，只在两个地方定义它：一个在javascript中，一个在SASS中。在javascript中，您可以使用全局变量（或者存储常量值），在SASS中，您可以定义如下前缀：

$prefix: 'prfx-';

.#{$prefix}grid {
    /* compiles to .prfx-grid */
}

.#{$prefix}other {
    /* and so on */
}

---

这可能不如在javascript和CSS中都有一个单一的定义那么好，但是在两个地方进行更改肯定比全局查找替换要好。从理论上讲，您可能会向SASS添加一个Ruby扩展，该扩展将从Javascript代码可以通过AJAX访问的文件中读取前缀值，但在我看来，这样一个系统不值得为它的设置和正常工作付出额外的努力。

您可以定义一个伪元素，并使用CSS的

content

属性将您的SCSS前缀传输到JavaScript。我在本例中使用了

，但它可以是任何伪元素：

$prefix: 'myPrefix';

body::after {
  // Value must be quoted, so we use
  // string interpolation to print variable
  content: '#{$prefix}';
}

然后JavaScript可以在运行时查找此文本并将其用作前缀：

// pseudos can't be selected like normal DOM elements due to
// browser specs, but you can grab computed styles and remove
// the quotes yourself.
var prefix = window.getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g,'');
// result: 'myPrefix'

获取计算样式会导致回流/布局/绘制，但如果您只执行一次，这并不是世界末日