CSS编写经验谈:常用的10个CSS类名

【 tulaoshi.com - Web开发 】

很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。

fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下

 .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"
 liimg src="images/img_01.jpg" alt="First Thumb" //li
 liimg src="images/img_02.jpg" alt="Second Thumb" /
 
 .../li
/ul

alt是alternative（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：

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

这个最经常用的，用来处理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也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）。

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

link跟image类似，我用来嵌套一个A标签，最经常用来制作Read More链接：

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

 这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：

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

用来实现隔行换样式，一般用在表格和列表：

 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"
  tdContent/td
  tdContent/td
 /tr
 tr class="odd"
  tdContent/td
  tdContent/td
 /tr
 tr class="even"
  tdContent/td
  tdContent/td
 /tr
 tr class="odd"
  tdContent/td
  tdContent/td
 /tr
/table

一般用在为指定内容中特定部分添加特定的样式：

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