这些css类的名字好吗？答案

【问题标题】：are these css classes names good?这些css类的名字好吗？
【发布时间】：2010-04-11 17:24:30
【问题描述】：

请参阅本页的/* Common Classes */ 部分。

http://webdesign.about.com/od/css/a/master_stylesht_2.htm

这些 css 类好用，可以在任何项目中使用吗？在语义方面？

/* Common Classes */

.clear { clear: both; }

.floatLeft { float: left; }

.floatRight { float: right; }

.textLeft { text-align: left; }

.textRight { text-align: right; }

.textCenter { text-align: center; }

.textJustify { text-align: justify; }

.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */

.bold { font-weight: bold; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.noindent { margin-left: 0; padding-left: 0; }

.nomargin { margin: 0; }

.nopadding { padding: 0; }

.nobullet { list-style: none; list-style-image: none; }

【问题讨论】：

这些规则集带有匹配 HTML 类的类选择器，而不是 CSS 类（不存在）。术语“CSS 类”已被应用于“规则集”、“选择器”、“类选择器”和“HTML 类”，使其不精确、混乱和错误。最好避免。
stackoverflow.com/questions/1790455/…的可能重复
@takpar 骆驼与否，这并不重要。重点是这些类的含义，而不是它们的视觉意义。

标签： css semantic-markup

【解决方案1】：

没有。它们不是好的选择。 css 的全部意义，尤其是关于类的概念，是描述某事物代表“什么”，而不是“如何”出现。事物的含义（即它的语义）和它如何出现（即它的表现形式）是两个独立的概念。例如，如果您决定在一个样式表上将菜单显示为蓝色和浅蓝色，而在另一个为色盲人士设计的样式表上显示高对比度的黑底白字，那么某个菜单不会改变的事实。

如果您为类赋予表示含义，则更改文档的显示方式将需要更改网页 html，这完全违背了将 CSS 作为专门设计用于提供和封装表示的技术的全部意义。为了防止这种情况，替代方法是最终拥有名称不代表合理信息的类（例如，名为“bluefont”的类实际上包含一个 color:red 指令）。因此，将“bluefont”作为名称是完全任意的，并且与实际内容不同步。它可能是一个随机字符串“abgewdgbcv”，但最好选择与表示无关并传达含义的东西：它的相关语义。

我们结束了这个圈子：这是课程的全部意义所在。另见this document at W3。

【讨论】：

但.bold { font-weight: bold; } 将始终相同。因为我们将在每个项目中使用相同的类，并且不会更改这些属性。
关键不在于你是否将.bold { font-weight: bold; } 变成.bold { font-decoration: italic; }。关键是，如果您想将某些内容从粗体更改为斜体，则必须在 html 中查找它，但表示是样式表的问题。如果非要碰html来处理presentation，那就说明你做错了。
@Stefano - 好的，我明白了。但是每当客户需要对设计或内容进行任何更改时，我们就必须在 HTML 中编辑某些内容。在 CMS 中，我可以在一个地方更改类名，这将在整个站点中更改。
你会开车吗？借助同步器，您可以在不踩离合器的情况下挂档，但这并不意味着您不应该踩离合器。如果 CMS 正在帮助您做某事，那么对您来说会更好，但您仍然在滥用这个概念。最终，您的变速箱会发生故障。
对于粗体文本，important 通常是一个非常糟糕的选择。 CSS 规范对此提出了警告：""" 注意。CSS 赋予“类”属性如此强大的功能，以至于作者可以根据几乎没有相关表示的元素（例如 DIV 和 SPAN 中的 DIV 和 SPAN HTML) 并通过“类”属性分配样式信息。作者应避免这种做法，因为文档语言的结构元素通常具有公认和可接受的含义，而作者定义的类可能没有。“””。您可能应该改用 <strong> 元素。

【解决方案2】：

不，不是。

类名最好描述你使用它的目的，而不是确切的用途。

例如，如果您将一个类命名为“bluebold”，然后决定您希望文本为红色和斜体，您要么必须创建一个新类并在使用它的任何地方更改它，要么最终得到一个类名不再适合了。

【讨论】：

+1 语义是关于意义，而不是表示，尽管我总是怀疑将这种语义意义用于其他目的，比如在基于类的微格式中。
但通常我们将这些类用于多种目的。和班级小组一样。 <p class="bluehold noindent> 那么呢？
将这些类称为“MainFrameHeader”或“MainFrameHeaderSubTitle”或描述它是什么而不是它应该是什么样子的东西会更有意义。这个答案是正确的，一旦你改变了你遇到的麻烦。
@SLC 但在我的示例中，.noindent 将始终为{ margin-left: 0; padding-left: 0; }。无需改变
... 然后你最终在文档中一半的开始标签上写了 class="noindent" 。使用描述元素组的类名，然后编写 CSS 来匹配它。如果您在 HTML 中添加演示文稿描述，那么您做错了。

【解决方案3】：

我想建议的一点是，当你扩展这些时，请确保你只使用动词而不是使用任何形容词作为类的名称，你应该很好！

编辑：

我同意其他人的观点，类名代表它的用途，而不是它的作用。

【讨论】：

【解决方案4】：

常见的 CSS 类过于细化并引发类问题。伪选择器可以在一定程度上缓解这个问题。假设正在设计一个新网站，我将执行以下操作：

*{
margin:0;
padding:0
}

li {
list-style: none; 
list-style-image: none;
}

其余的很难解决，floatLeft和floatRight要由布局来定义，

<div id="main">
<div class="searchPanel">
</div>
<div class="resultsPanel">
</div>
</div>

理想情况下，CSS 应该看起来像（布局驱动） #主搜索面板 { 向左飘浮; } #主要结果面板{ 浮动：对； }

希望您能理解。但是，我面临粗体/下划线文本的问题。带下划线的文字表示丑陋的设计。用户倾向于将此类与超链接混淆

【讨论】：

【解决方案5】：

一些建议：

.floatLeft --> .float-left: 没有骆驼套。
.bold --> .important 名称应该告诉目标没有显示如何做到这一点
.nobullet --> ul.nobullet 最好是最详细的，以避免与其他 css 冲突。

【讨论】：