使用像“正确”这样的类名被认为是不好的做法吗？

Posted 2023-02-24

【中文标题】使用像“正确”这样的类名被认为是不好的做法吗？

【英文标题】：is using class names like 'right' considered bad practice?

【发布时间】：2010-09-19 12:38:28

【问题描述】：

如果我有诸如“left”、“right”、“clear”和xhtml之类的类名

<a href="index.php" class="right continueLink">Continue</a>

像 CSS 一样

.right 
float: right;

我知道这不是一个语义名称，但有时它确实让事情变得更容易。

不管怎样，你有什么想法？

【问题讨论】：

根据 Bootstrap，pull-right 是可以的。

【参考方案1】：

我认为这不是一个好主意。现在，当您（或未来的维护者）去更改您的网站布局时，您要么必须将 .right 更改为 float:left;（显然是个坏主意），要么检查所有 HTML 文件并将 right 更改为 @ 987654324@.

为什么您希望该特定链接向右浮动，而其他 .continueLink 不这样做？使用该问题的答案为该链接选择一个更具描述性的类名称。

【讨论】：

我同意你的看法。我正在编辑一个不关心语义的现有系统，所以我决定通过使用 CSS 来让自己的生活更轻松。虽然我永远不会为自己的项目这样做。

在几乎所有情况下，我都完全同意你的看法。但是，有一种情况我无法解决，只能使用“左”和“右”：在文章中放置浮动图像。确切的选择或多或少是任意的。真的没有其他东西可以区分图像。

在 Bobby Jack 所描述的情况下，我会说没关系。虽然您可以通过让 javascript 将这些类添加到每个其他图像来简化标记，以便浮动方向发生变化。

【参考方案2】：

css 是关于呈现您的 html 页面的结构。

意味着它的类应该代表文档的结构（'article'、'extra-links'、'glossary'、'introduction'、'conclusion'...）。

您应该避免与 physical 表示形式（'left'、'right'、'footnotes'、'sidenotes'...）相关联的任何类，因为就像 Zen Garden 这样清楚地说明，您可以决定以非常不同和不同的方式放置任何 div。

【讨论】：

你是对的，但“脚注”是一个糟糕的例子，因为它确实描述了文档的结构元素（无论它在哪里布局）。这与“标题”没有什么不同

我知道你会这么说 ;-) 但是脚注的定义明确指的是“页面底部”，一个“物理”位置。我更喜欢一个更通用的术语，如“cmets”或“relatedNotes”或简单的“notes”。见dictionary.reference.com/browse/footnote

【参考方案3】：

纯粹主义者会说不要这样做，而实用主义者会说没关系。但是纯粹主义者会把.right定义为float: left吗？

【讨论】：

当然，但我是一个实用主义者，我可能会将类更改为 .left

然后你必须改变你所有的 html 以及你的 css。这就是“纯粹主义者”试图提出的观点。

我实际上只需要更改我的 HTML 的某些位，如果我一开始就正确设计了视图，很可能只需要更改一个实例。

【参考方案4】：

建议避免使用与 CSS 规范中的值相同的名称以避免混淆。尤其是在多个开发人员在同一个应用程序上工作的情况下。

除此之外，我认为没有问题。我会像这样限定右名称或左名称：menuleft、menuright 等。

【参考方案5】：

作为一个纯粹主义者，我说不，不要这样做。由于前面提到的原因。

作为一个实用主义者，我只想说，我从未见过涉及纯 html 更改而没有 css 或纯 css 没有 html 的网站返工，仅仅是因为这两个部分都是在考虑另一个部分的情况下开发的。所以，实际上，如果其他人需要更改页面，我敢打赌我的薪水他们会同时更改 html 和 css。

以上是周围的同事纯粹主义者经常倾向于忽略的事情，即使这是现实。但底线；不，避免使用诸如“right”之类的类名。 :-)

【讨论】：

我不是在追求你的薪水，但我只想评论一下，我们刚刚完成了网站返工，其中没有任何 html 更改。仅更改了 css 和文本内容（文本从资源包中加载）

哇，对我来说，这真是让我大开眼界的基因，所以我很高兴看到我被证明是错的。我确实觉得您在这个特定项目中的经历是一个例外，您过去在其他项目中的经历是什么？

【参考方案6】：

.right 和其他类似的类，当然可以快速编写一个带有float:right 规则的标签，但我认为这种方法弊大于利：

通常带有单个float:right; 的类样式会缺少某些内容，如果其他类规则中包含display:block，您的示例只会向右浮动，因为“a”标签不是块级别元素。浮动元素也经常需要附加宽度和高度。这意味着您示例中的代码需要额外的代码来执行它所说的操作，并且当您必须更改 css 时，您必须在两个地方进行搜索。

我倾向于通过将页面划分为具有唯一 id 的不同 div 标签来设置我的 html 样式，然后像这样通过继承来设置这些 div 中的元素的样式。

div#sidebar  float:right; width:200px; 
div#sidebar ul  list-style-type:none; 

这使得对我的 css 文件进行分区成为可能，因此很容易找到设置特定标签样式的 css 代码，但是如果您引入 .right 和其他类，您就会开始将规则分散到不同的区域css 文件，使网站更难维护。

我认为拥有一个非常通用的类的想法源于希望通过更改样式表中的一些规则来改变网站的整个布局，但我必须说，在我 8 年的拥有 30 多个不同网站的网站开发我从未更改过网站的布局并重用 HTML。

我无数次所做的就是对页面区域进行小幅调整，这可能是由于设计上的微小变化，也可能是由于新浏览器的引入。所以我完全赞成将我的 css 分成整齐的块，这样可以很容易地找到我正在寻找的规则，而不是将代码放在不同的地方来实现更短的样式表。

问候 杰斯珀·豪格

【讨论】：

如果其他类规则包含 display:block，您的示例只会向右浮动，因为“a”标签不是块级元素 我认为 @987654325 @ 强制元素为块级？

【参考方案7】：

是的，从语义上讲这是错误的，但是，例如，有时我将图像定位在正文块中，我会给它们“正确”的类。

也许“alt”是一个更合适的类名。