Question

我关心的是使用我的jQuery选择器在样式表中定义的CSS类。原因是当样式表中定义了CSS类时，开发人员/设计人员有很多理由要更改类的名称或者如何在与jQuery选择器分离的html中使用它，而jQuery选择器也使用了类。没有什么可以告诉开发人员/设计人员在进行此更改时需要考虑JavaScript功能。

避免将jQuery选择器与合法的CSS类联系起来会更好吗，而是使用不依赖于任何样式的CSS类，并且使用像'j_'这样的前缀，这使得明显的目的是使用它专门作为jQuery选择器？这将使耦合不那么脆弱，代价是标记中的额外类名。这也会使验证引擎发现未定义的类不那么有用，但前缀有望使这些类成为jQuery选择器的目的。

...

我知道CSS类应该根据它们的功能命名。但是，我并不认为以这种方式命名类可以解决问题。开发人员/设计人员仍会更改名称，即使他们的新名称仍然描述相同的功能，或者他们可能会修改使用它的位置。在这些情况下，这些更改不会影响JavaScript功能。

Answer 1

css类名称应该描述元素的功能，而不是它应用于它的样式。如果您有一个浮动到左侧的侧边栏，请调用类侧边栏，而不是leftFloat。这样你就可以将侧栏的样式放在cbar的sidebar类中，并应用你需要的任何jquery函数。

编辑澄清其中一条评论：您不必重命名元素的类或ID。如果您有侧边栏，那么它可能会改为工具栏或顶部导航。它仍被称为侧边栏是否重要？用户从不注意到。或者你可以给出一些真正抽象的名字，比如导航窗格和主要内容。

上周我开始使用jQuery供内部使用的webapp，我只更改了一个id的名称，因为我需要更多地概括它。除此之外，每个类和id保持完全相同的名称。

Answer 2

我认为你的问题纯粹是概念性的。 HTML中的class属性未定义CSS类。它定义了元素的语义类。只是碰巧CSS使用这些类来应用样式（与jQuery选择器使用它们应用其他功能的方式非常相似）。没有什么可以阻止您拥有未在样式表中定义的类，或者根本没有样式信息的类。因此，所有类都应该被视为代码的一部分，而不是样式。代码规定了类，CSS只是背负语义标记来应用样式。因此，CSS永远不应该指定类名，并且设计者不应该更改类名。我意识到乍一看这可能听起来非常像其他答案（非常正确）建议你“使用语义名称”，但这里有一个微妙的概念差异：类是主人，CSS风格是奴隶

参考文献：this website清楚地说明了我的观点; w3schools也简要提到了它。

Answer 3

尊重关注点的分离是件好事。但要实现这一点，元素应该通过它们在页面上扮演的角色命名为语义。

不可

<div id="nav">...</div> <div id="sidebar">...</div> <ul class="productsList"> <li>...</li> </ul>

<强>为：

<span class="Verdana11">...</span> <div class="blueBox">...</div> <ul class="bulletedList"> <li>...</li> </ul>

等。请注意，元素是根据元素在页面上的功能命名的。样式将更改 - 您可以依赖它。但角色不应该（除非重新设计网站，这无疑意味着你将重新编码）。因此，侧边栏始终是侧边栏，无论字体大小是否更改，或者边框是否在某些位置被删除。

在编写脚本时，您应该根据不会更改的类名来定位元素。这只有在您按语义命名元素时才有可能 - 而且您的共同开发人员也应该这样做。

Answer 4

我投票支持精益方法。如果你有好的类名对CSS和jQuery有意义 - 使用它们。如果名称对jQuery没有意义，那么添加新的名称或重命名现有的类。

如果您担心开发人员通过重命名类来破坏脚本，那么只需在CSS中添加注释，以便在更改类名时搜索jQuery引用。

Answer 5

我倾向于同意你的看法：最好将“视觉”类与“功能”类分开。

但是在某些情况下，类名显然表明某个类具有一些功能效果。例如，.input编辑的类可以由jQuery设置并同时用CSS设置样式。

Answer 6

尝试使用更多种选择器。如果标记不会发生太大变化，但您的类名可能会更改，请尝试尽可能少地使用类选择器。如果您的课程不会有太大变化，但您的标记将会更多，请使用更多课程。实际上，你的jQuery选择器应该和你编写的任何其他东西一样语义。可读性很重要。

Answer 7

我同意这些人说CSS类应该是语义的而不代表视觉外观，但我仍然认为你的问题很好，关于布局和行为之间的“真正”分离。

我认为最好将仅由脚本使用的类放在单独的样式表中。通过JS包含它（因为如果JS不可用则不需要）。示例将是“.hover”或“.current”，显然只有通过脚本完成，例如对块级元素的影响。在内联元素上，您可能只使用CSS伪类。

作为一名HTML / CSS开发人员，当人们说“噢，已经有一个CSS课程，我可以加入其中”时，我可能会皱起眉头，但它完全没问题。毕竟所有的class属性都不是CSS独有的。它是一个HTML属性。关于删除仍然在JS中使用的CSS规则的担心，老实说：对于大型网站上的CSS，无论是使用JS还是HTML，您都无法完全确定它。

Answer 8

我打算将此作为对Marius' excellent answer的评论发布，但它开始变得很长，我想添加一个例子。

不要将它们视为“CSS类”。他们不是。类是the HTML specification的一部分，与CSS没有任何联系，而是与JavaScript相关联。

存在用于向HTML元素添加信息的类。这是新闻吗？它是一个小部件吗？它被禁用了吗？除了类之外，HTML无法指定这些属性。有些类具有与它们相关联的样式信息（新闻项应该具有标题，发布日期和格式良好的格式），一些具有与之关联的功能（小部件需要初始化），而其他类具有两者（元素以编程方式被禁用和应隐藏或“褪色”。）

绝对没有理由不在CSS和JavaScript中使用相同的类 - 只要两者都适合于该类所代表的信息。

Answer 9

我认为对CSS和脚本使用相同的类是绝对正确的。

想象

<div class=css-class>
  <div class=script-class>
    <address> <!--for semantic "this is my homepage"-->

难道不够丑陋吗？一个div略胜一筹。一个地址稍微好一些。一堂课稍微好一些。

问题“他们改变了类”通过评论，测试和仔细编辑来解决。

我应该避免在样式表中定义的CSS类上使用jQuery选择器吗？

9 个答案: