0

有关CSS的Class命名

My Top 10 Most Used CSS Class Names

看到这篇文章以后,做下自己的整理。

在写css的过程中,Class的命名是非常重要的一项内同,简洁有语义的Class命名有利于代码的可读性。虽然伴随着HTML5的到来,会逐渐弱化,直接在HTML标签上进行简化和加强语义,但是这里还是有必要写一下。

class=”fixed”

这里是清除浮动的新写法,自动产生一个不显示的字符”.”,清除浮动,非常的实用。我自己使用class=”clearfix”

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

class=”alt”

alt是”alternative”的缩写

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

class=”first”,class=”last”

直到所有的浏览器都支持:first-child:last-child属性以后,这个写法将会消失。

class=”inner”

作为内容器经常与container一起使用

<div id="container">
	<div>

	</div>
</div>

class=”even”,calss=”odd”

使用在隔行变色的li或者table tr上

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

class=”section”

替代以前常用的class=“box”

<div>
	content here...
</div>

Leave a Reply