我最常用的10个CSS类

在指定类名到元素时,许多开发人员常常感到困惑,而且他们也常常在最后才会发现使用的类竟然是错误的。

类名不应当描述元素看起来像什么或在哪里使用它。一个良好的类名应该说明它代表的是些什么内容或功能。这是我最常用的10个类名及其解释,希望能给你一个明确的应该使用什么样的类名的概念。

class=”fixed”

我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该容器内的浮动,使用这些代码:

.fixed:after{
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  */
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

那么如果我遇到类似这样的情况:

<ul>
	<li><img src="images/img_01.jpg" alt="First Thumb" /></li>
	<li><img src="images/img_02.jpg" alt="Second Thumb" /></li>
	...
</ul>

…这里这些图片是浮动的,它们彼此紧挨着,我就这样使用:

<ul class="fixed">

class=”alt”

Alt是”alternative” (或是”alternate”)的缩写。我在当我有一组以某种方式布局的元素,但是其中的一些有些小变动的地方使用这个类名。比如,图片左浮动或右浮动。

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}	
	

class=”selected”

这个类名我常常用在导航菜单上,当某个菜单被选中时:

<li class="selected"><a href="/about">About Us</a></li>

同时我在用JS实现的标签效果时使用它来现在选中的标签:

<dl>
	<dt class="selected">Tag Cloud</dt>
	...
	...
	...
</dl>

class=”first”, class=”last”

:first-child:last-child伪类被所有浏览器完全支持之前,我将坚持使用这两个样式。我用这些类来选择某个元素的第一个和最后一个子元素。我发现这是减少不必要标签的非常棒的方法。

class=”image”

我通常在选择图片时使用标签选择器(例如 #content img),而根据实际需要将这个类名用于图片的容器(p class=”image”)。比方说,你有个新闻列表,你需要图片,而且图片下面有靠左浮动的摘要,然后是余下的新闻内容。我这样做:

<p class="image">
	<img src="/images/img_me.jpg" alt="my funny face" />
	This is me trying to look cool!
</p>
<p>
	The rest of the content here
	...
</p>

class=”inner”

我常常使用这个样式,必须要说的是,它最常用于表面的用途。我将这个类名指定到某个额外嵌套的div,因为我需要扩展的样式(比如,双背景)。

<div id="container">
	<div class="inner">
	
	</div>
</div>

就像这个类名一样,我用这个类名来控制链接样式。:)但是我常常将这个类名用在容器上,通常是一个p标签,而不是直接用在A标签上面。它最常见的用途就是那些”read more”按钮。

<p class="link"><a href="#">Read more...</a></p>

那样我就可以用.link控制P内部的链接样式,而且也可以同时用该样式控制这个段落的样式。

class=”one”, class=”two”, class=”three”…

当我需要单独的指出每个元素的时候,我使用这几个样式。最常见的案例就是在导航菜单中使用图片替换技术的时候。

<ul>
	<li class="one"><a href="#">Home</a></li>
	<li class="two"><a href="#">About</a></li>
	...
</ul>

class=”even”, class=”odd”

这两个类名用来交替显示表格和列表中的相邻的两行。

<ul>
	<li class="even">Content</li>
	<li class="odd">Content</li>
	<li class="even">Content</li>
	<li class="odd">Content</li>
</ul>

或是:

<table>
	<tr class="even">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="odd">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="even">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="odd">
		<td>Content</td>
		<td>Content</td>
	</tr>
</table>

class=”section”

这个类名之前一般被称为”box”。:) 在我需要一些特殊样式时,我用它来显示特定章节的内容。

<div class="section">
	content here...
</div>

=低调的分割线========

翻译自:http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names
转载请注明出处,谢谢。