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的一些想法而已。