这些css类名称好吗?

时间:2010-04-11 17:24:31

标签: css semantic-markup

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

5 个答案:

答案 0 :(得分:14)

没有。他们不是好选择。 css的整个观点,特别是关于类的概念,是描述某事物所代表的“什么”,而不是它应该如何出现。什么意思(即它的语义)以及它是如何出现的(即它的呈现)是两个分开的概念。事实上,如果您决定在浅蓝色上显示蓝色,其中一个样式表和高对比度黑色在另一个为彩色盲人制作的样式表上显示为蓝色。

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

我们关闭圈子:这是课程的重点。另请参阅this document at W3

答案 1 :(得分:13)

不,不是真的。

首先,类名称应描述您使用它的内容,而不是它的用途。

例如,如果您将类命名为“bluebold”,然后确定您希望文本为红色和斜体,则必须创建一个新类并在其使用的任何位置更改它,或者您最终使用类名那不再合适。

答案 2 :(得分:1)

我想建议的一点是,当你扩展它们时,请确保你只使用动词而不是使用任何形容词作为类的名称,你应该是好的!

修改

我同意其他人的类名称代表它的用途,而不是它的用途。

答案 3 :(得分:-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 {     向左飘浮;     }     #main resultsPanel {     漂浮:对;     }

希望你能得到这个想法。但是,我遇到粗体/带下划线的文字问题。带下划线的文字表示丑陋的设计。用户倾向于将此类与超链接混淆

答案 4 :(得分:-3)

一些建议:

  1. .floatLeft - &gt; .float-left: 没有骆驼套装。

  2. .bold - &gt; .important 名称应告诉目标没有显示如何做到

  3. .nobullet - &gt; ul.nobullet 最好指定以避免与其他CSS冲突。