添加一个不存在的css类是否很糟糕？

Posted 2023-03-05

【中文标题】添加一个不存在的css类是否很糟糕？

【英文标题】：Is it bad to add a css class that doesn't exist?添加一个不存在的css类是不是很糟糕？

【发布时间】：2012-02-17 10:15:55

【问题描述】：

我想向一些文本字段添加一堆类，以便我可以使用 jquery 获取它们的值。这似乎是使用 jQuery 时的标准做法，this post 建议将其作为答案，但这对页面加载有何影响？它不会试图找到所有这些类吗？过去有人告诉我尽量减少控件上使用的类的数量。

我有大约 12 个控件，我想添加独特的类来获得它们的价值。我正在使用 asp.net，所以我不能使用 id。我也不能使用 ClientID，因为控件在表格中（但任何时候都只会显示一组控件）。

例如

<asp:TextBox ID="txtValue1" runat="server" CssClass="value1" Text='value1' />
<asp:TextBox ID="txtValue2" runat="server" CssClass="value2" Text='value2' />
<asp:TextBox ID="txtValue3" runat="server" CssClass="value3" Text='value3' />
...

var value1 = $('.value1').val();
var value2 = $('.value2').val();
var value3 = $('.value3').val();

并且css中不存在任何类名。

谢谢

编辑：

我知道这行得通，但我更好奇它对页面加载的影响。有一个答案（现在似乎已被删除）说 html 解析器忽略了类。 css 解析器只会查看已定义的类。所以听起来它会被完全忽略并且对页面加载没有影响。是这样吗？

【问题讨论】：

我不认为 Edit 是对的。据我所知，它将在 CSS 中搜索类名，而不是找到它并继续前进。我会说它会增加页面加载量，但可以忽略不计。 developer.mozilla.org/en/…code.google.com/speed/page-speed/docs/…

【参考方案1】：

可以使用不存在的 CSS 类，但如果它们是唯一的，则要使用 id，而不是 class。

【讨论】：

嗨 Logan，我不能使用 ID，因为它会被转换为类似 ctl00_ctl00_ContentPlaceHolder_txtValue1 的东西。这是在现有代码中使用的，我现在正在处理它，因为布局发生了变化，改变了 id。我现在必须寻找所有损坏的 javascript。

您可以使用 ID 并且应该...请参阅下面关于如何在 JQuery 和 asp.net 中使用它的答案

【参考方案2】：

我认为这不是问题。唯一一次我遇到不存在的类或 ID 的问题是有一次我有一次 onclick 引用了一个不存在的 ID。这把事情搞砸了……除此之外，我认为课程是无害的。不过我很想知道..

还有什么想法吗？？

【参考方案3】：

您使用的是哪个版本的 asp.net？在 asp.net 4.0 中，您可以使用未损坏的 id。看起来最简单的解决方案是将 ClientIDMode="Static" 设置为所有文本框，然后通过 id 引用。否则，当然，我创建了不存在的类来引用事物......一直。

编辑：（回应您对效果页面加载的评论）。

我认为您关于在 div 中包含当前未使用的额外类的问题不是一个坏问题（至少在理论上），老实说，我不知道确切的答案。我相信任何影响都是微不足道的。如果您考虑编写 html 的最佳实践，您通常会在编写 CSS 之前编写和构建 HTML 及其类。这意味着在您编写 CSS 时，肯定不会使用某些类。实际上，在对基本标签（body、h1、a 等）进行样式化之后，您可能会发现您永远不需要为某些特定设计创建带有这些类的选择器。然而对于下一个设计，您可能需要这些类。我很确定 CSS 背后的技术是在考虑这些场景的情况下构建的，我敢打赌，互联网上数百万甚至数十亿的页面都遵循这个确切的场景，特别是如果他们使用像 Modernizr 这样的东西，它会添加类到页面的 html 元素作为向您提供类的一种方式，您可以根据当前浏览器的可能功能进行选择。你可能永远不需要这些类，但如果你需要它们，它们就在那里。

【讨论】：

我试过了，但 id 最终变成了“I”。我会说这是因为它在桌子上。我在上面的评论中所说的并不完全正确。它实际上是 ctl00_ctl00_ContentPlaceHolder_efX_txtValue1，其中 X 是行号。

【参考方案4】：

您说您使用的是 ASP.Net，因此您不能使用 ID 参数，但您可以。在 JQuery 中，您可以使用以下控件获取控件

var value1 = $('[ID$=yourID]').val();

有关 JQuery 选择器的更多信息，请查看：JQuery Selectors 和 Attribute Ends With Selector

上面的选择器基本上会在“yourID”中找到 id ENDING，因此忽略开头的所有母版页额外文本。你只需要确保这些是独一无二的。例如没有像“HSBC”和“SBC”这样的ID，因为“SBC”上的上述选择器会找到两者。

【讨论】：

尽管添加类看起来不错，但这似乎是对我当前问题的更优雅的解决方案。谢谢。