javascript - JavaScript 中用于选择的类是否应该在 CSS 文件中定义？

Question

我们的设计师要求我们将我们用于 JavaScript 选择器的类添加到 CSS 文件中，并附上说明它们供 JavaScript 使用的注释。目的是避免利益冲突；设计人员可能会因为未应用样式而从元素中删除类。

例如，标记可能是:

<div id="Book1" class="book">
</div>

然后，如果“book”类用于 JavaScript 选择，则 CSS 文件将包含以下内容:

.book {/* Used as a JavaScript selector */}

是否有使用此技术的示例，以及为什么应该(或不应该)使用它？我正在寻找有关此技术的缺点、优点和标准的示例或官方建议。

Answer 1

这只是您的设计师在寻找某种形式的 CSS 控制，以确保他/她的更改不会破坏您网站中的客户端功能。然而，这样做的问题是您现在将功能与样式混合在一起，在设计良好的网站中，样式首先应该分开。

最好确保您在您希望定位的元素上创建类，这些元素没有关联的样式并且仅用于客户端 js 目的。您总是可以同意一个约定，即您在所有此类类前加上“js”前缀，例如 jsMYCLASS，然后使用类似以下 jquery 语法的东西引用它们；

<div class='book jsBookItem'></div>

目标:

$('.jsBookItem');

在此示例中，您可以看到原始的“书籍”样式很好地位于非样式类旁边，但您的设计师可以独立于客户端代码更改/删除“书籍”样式，客户端代码现在仅依赖于“jsBookItem”。

他/她的建议的另一个主要问题是它会使 css 文件膨胀并增加下载/缓存样式表所花费的时间，而对最终客户没有任何好处。即使缩小 css 仍会留下部分有效但未使用的 block 。