paperen最近在设计某人的砂场销售系统页面的时候,突然在对css的命名有了点想法,比如对某个元素你可以使用id或者class来对它的css进行编写。前者的区别与后者的区别是明显的,同一个页面中id号是唯一的,也就是说不能有两个或以上的id名字在同一个页面出现,而class则相反,你可以在一个页面中使用同一个class对不同元素进行美化,而且可以套用多个class。类似下面这样写。?

#useid{font-size:12px;}
.useclass{border:1px #CCCCCC solid;}
.bigfont{font-size:14px;}
</style>
<div id="useid">记住ID号唯一</div>
<div class="useclass">而使用class则不同</div>
<div class="useclass bigfont">而使用class则不同</div>

这些是写css的基本准则了,可能大家对多个class一起套用的方法用得不多吧,paperen我也是在学做WordPress的模板时发现可以这样用的(可能是以前看书不够仔细吧……)?

那么如果要写写paperen右边的边栏的css应该怎样写呢??

如果你喜欢使用id的话,你可能会这样:

<style>
#sidebar{}
#sidebar #motto,#sidebar #lastpost{}
#sidebar #motto h5,#sidebar #lastpost h5{}
#sidebar #motto p,#sidebar #lastpost p{}
#sidebar #motto li,#sidebar #lastpost li{}
</style>
<div id="sidebar">
<div id="motto">
<h5>心情</h5>
<p>做自己喜欢的事并喜欢自己所做的事</p>
</div>
<div id="lastpost">
<h5>最新无聊文章</h5>
<ul>
<li><a href="#">看了别后悔</a></li>
<li><a href="#">今天下了好多雨</a></li>
</ul>
</div>
</div>

对于有没有必要用一个div包住不同的sidebar中的各部分内容,这个自己想吧,paperen我自己也不好说,而很明显随着sidebar里面的内容丰富(这里就写到最新文章那),css的这部分也会越来越长?

#sidebar #motto,#sidebar #lastpost{}
#sidebar #motto h5,#sidebar #lastpost h5{}
#sidebar #motto p,#sidebar #lastpost p{}
#sidebar #motto li,#sidebar #lastpost li{}

故这样看上去会觉得比较的混乱,但是这样的css写法对微调是相对方便点,因为你可以对每个sidebar中的内容进行微调。比如如果我想对新文章那个标题加背景,你就在上面这些css后面加上#sidebar #lastpost h5{background:#CCCCCC;}就能使新文章那产生有别于其他版块的效果。对这样的css再稍微简化一下。

<style>
#sidebar{}
(一个tab的空白距离)#motto,#lastpost{}
#motto h5,#lastpost h5{}
#motto p,#lastpost p{}
#motto li,#lastpost li{}
</style>

省去了前缀#sidebar,而对css写法也使用缩进的写法,paperen我也是在一次偶然的机会下看到的,忘了是哪个网站还是哪个模板的css代码写法了,这种写法体现层级关系,与html的写法类似,这样写也有理由,因为你可以从css就看出html中元素的嵌套关系。谁在外面谁在里面。?

如果对于喜欢使用class的话,可能会这样写。

<style>
.sidebar{}
.sidebar_box{}
.sidebar_box h5{}
.sidebar_box p{}
.sidebar_box li{}
</style>

<div class="sidebar">
<div class="sidebar_box">
<h5>心情</h5>
<p>做自己喜欢的事并喜欢自己所做的事</p>
</div>
<div class="sidebar_box">
<h5>最新无聊文章</h5>
<ul>
<li><a href="#">看了别后悔</a></li>
<li><a href="#">今天下了好多雨</a></li>
</ul>
</div>
</div>

很明显地觉得这样的代码比使用id的css写出来的代码看起来舒服,简洁,但是这样的话微调的能力不高,如果确实需要微调的话,需要附加上id号。例如如果要对新文章的标题加背景的话,需要给<DIV class="sidebar_box">加上id="last_post"然后再写.sidebar_box#last_post h5{background:#CCCCCC;},需要扩展一下html元素吧(paperen尚且这样形容--扩展html元素就是添加上一个id号啦,实在不知道专业术语应该怎说了)。而这里的css写法paperen觉得就没必要写成有嵌套关系的了吧。?

而paperen自己是推荐大体使用class的方法再配合使用id对局部地方进行微调的css写法,因为这个很好理解,使用class对需要一样渲染效果的html元素进行渲染,然后使用id对局部特殊的元素进行另类的渲染,听上去确实也是很美好的。?

而如果我要心情那的标题加背景,新文章那标题加下边框,新评论那个的字体加黑,被踩得火热的文章那个文字颜色不一样,随机来一篇文章那的边距与其他的不一样……当每个元素的个性化比较突出时,使用上面这样的写法也是避免不了css的混乱。.sidebar_box#last_post h5类似这种的css会比较多,不过这个确实是不可避免的了,因为你确实觉得这样是最好的方法了。?

不过近来paperen有了一个可怕的念头……就是使用N多个class……希望大家不要见笑。?

如果我将一些基本的效果单独出来再来渲染一个html元素。

<style>
.float_left{float:left;}
.float_right{float:right;}
.stress{font-weight:bold;}
.border_bottom{border:1px #CCCCCC solid;}
.red{color:#FF0000;}
.padding_3{padding:3px;}
.margin_5{margin:5px;}
.margin_5_auto{margin:5px auto;}
.width950{width:950px;}
</style>
<div class="float_left stress border_bottom padding_3 red margin_5_auto width950">是不是比较BT的想法</div>

那么你觉得这个做法怎样?还是令css很混乱?还是更差?想想,希望你能说出你的想法然后分享一下。当然paperen我不会提供你关于css的最好的写法,因为我自己都不是很能领悟什么是最好的css写法与怎样使用最简的html完成一些页面,这里paperen我只是说出自己对于css的一些想法而已。