这些CSS类名好不好？

Question

请参阅本页的 /* 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; }

Answer 1

不，它们不是好的选择。 CSS 的全部要点，特别是类的概念，是描述某物代表“什么”，而不是它应该“如何”出现。某事物的含义（即它的语义）和它如何出现（即它的呈现）是两个独立的概念。事实上，如果您决定使用一个样式表将其显示为浅蓝色上的蓝色，并在另一个为色盲人士设计的样式表上将其显示为白色上的高对比度黑色，那么某些东西（例如菜单）不会改变。

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

我们就结束了这个循环：这就是课程的全部意义。另请参阅W3 上的此文档。

Answer 2

不，不是真的。

类名最好应该描述您使用它的用途，而不是确切地描述它的用途。

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

Answer 3

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

编辑：

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

Answer 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理想情况下应该看起来像（布局驱动）
#主搜索面板{
浮动：向左；
}
#主结果面板{
浮动：右；
希望

你明白了。然而，我遇到了粗体/下划线文本的问题。带下划线的文本表示设计丑陋。用户往往会将其与超链接混淆

Answer 5

一些建议：

1. .floatLeft --> .float-left：
   没有驼峰式大小写。

2. .bold --> .重要
   名称应该告诉目标，但不显示如何做到这一点

3. .nobullet --> ul.nobullet
   最好是最指定的，以避免与其他 css 冲突。