3

请参阅/* 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; }
4

5 回答 5

14

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

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

我们关闭了这个圈子：这是课程的全部意义所在。另请参阅W3 上的此文档。

于 2010-04-11T17:34:25.557 回答
13

不，不是。

最好一个类名应该描述你使用它的目的，而不是它的作用。

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

于 2010-04-11T17:29:08.203 回答
1

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

编辑：

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

于 2010-04-11T17:28:08.517 回答
-1

常见的 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 应该看起来像（布局驱动）#main searchPanel { float: left; } #main resultsPanel { 浮动：对；}

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

于 2010-04-11T17:41:09.333 回答
-3

一些建议：

  1. .floatLeft --> .float-left: 没有驼峰式。

  2. .bold--> .important name 应该告诉目标没有显示如何做

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

于 2010-04-11T17:34:36.397 回答