武林網(wǎng)(www.survivalescaperooms.com)文章簡介：很多做前端開發(fā)的在為頁面元素定class的時候經(jīng)常會拿不定主意，導(dǎo)致隨意使用class，一個好的class要能夠描述出某個特定元素的表現(xiàn)，在符合團隊開發(fā)流程、規(guī)范的情況下也要注意在工作中形成一套自己的風格，下面是我最經(jīng)常使用的個人認為命名比較恰當和有一定作用的10個c

很多做前端開發(fā)的在為頁面元素定class的時候經(jīng)常會拿不定主意，導(dǎo)致隨意使用class，一個好的class要能夠描述出某個特定元素的表現(xiàn)，在符合團隊開發(fā)流程、規(guī)范的情況下也要注意在工作中形成一套自己的風格，下面是我最經(jīng)常使用的個人認為命名比較恰當和有一定作用的10個class。

fixed這個class幾乎出現(xiàn)在沒個樣式文件中，用在為包含浮動子元素的容器元素清除浮動，樣式如下

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

這個樣式就可以用在下面的情形，每個li都是浮動的：

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

alt是”alternative”（交替）的簡稱，這個class用在有一組樣式一樣的元素，需要為其中的某幾個設(shè)定特別的樣式，比如一組向左浮動的圖片中需要有一張是向右浮動,可以這樣：

 #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;
 }

這個最經(jīng)常用的，用來處理mouseover或選中元素的效果。

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

選項卡制作的時：

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

 直到99.9% 的瀏覽器支持:first-child和:last-child這兩個偽類之前，class=”first”, class=”last”用的地方還是很多的。

5.class=”image”

平常選擇圖片元素一般用類似(#container img)這樣的標簽選擇器，但是我這里的class=”image”是用在包含圖片的容器元素，假如你正在做一個新聞列表，需要在新聞標題下面加一行帶圖片和說明文字，并且向右浮動，可以這樣做：

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

inner也是經(jīng)常使用的class，而且大部分上是用來制造視覺上的額外效果，用來給嵌套在容器里的子容器定義樣式（比如制作雙背景圖片效果）。

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

link跟image類似，我用來嵌套一個A標簽，最經(jīng)常用來制作”Read More”鏈接：

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

 這些class用在需要區(qū)別每個子元素的列表項，比如用移動背景圖片來制作導(dǎo)航菜單：

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

用來實現(xiàn)隔行換樣式，一般用在表格和列表：

 <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>

一般用在為指定內(nèi)容中特定部分添加特定的樣式：

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