如何对一个博客系统进行CSS管理？
2009-11-10 19:56 by 老赵, 16706 visits忽然发现，我的博客皮肤又改变了，这次是About栏：
如果您和我博客右侧的内容相比，会发现行间距首行文字略有下沉，且段落之间的间距变小了，导致“希望”一段跑到了照片的右侧，进而照片与下方文字的间距也加大了。
我在博客版式上投入了很大的精力，动用了大量的JavaScript和自定义CSS，希望可以让浏览效果更加“和谐”。可是，博客园在样式管理上似乎经常会出现一些问题，时不时让一些基础的样式修改破坏了版式。对于大部分朋友来说，可能不很在乎一个版式的缩进、行间距是否对齐等等。但是对我来说，一些细节上的破坏就会让我觉得有些不舒服。那么这次到底又发生了什么呢？幸好我在TechEd的示例中保存了一周前的CSS文件，于是再用Fiddler抓取新的CSS文件后使用WinDiff进行对比，终于发现罪魁祸首是common2.css文件。
在一周前的common2.css文件中，有个定义是：
p { margin: 0 auto 10px auto; text-indent:0px; }
而在现在的common2.css文件中，这个定义变成了：
p { margin: 5px auto 5px auto; text-indent:0px; }
既然知道了原因，那么我只要加一行自定义样式便把效果修补回来了：
div#about_body p { margin: 0 auto 10px auto; }
那么，为什么这样的事情总是一而再，再而三地发生呢？这无法不让我多想一些。似乎这次的问题是由两方面原因造成的：
- 博客园修改了过于宽泛的选择器：p是个非常基础的CSS选择器，涉及到整个页面的p元素，对他进行修改就好比改变了类库中的基本类型。对于这样的修改一定要小心，因为影响过于巨大，试想如果.NET修改了Object类的行为那么会造成什么后果呢？
- 皮肤的样式直接依赖了最基础的样式：如果说上一点是主要因素，那么这一点就是次要因素。由于about区域的文字直接依赖于基本上“毫无关联”的基础样式，导致了一些难以预料的事情发生。因此，最终的解决方案也是使用了限制更优先的选择器来覆盖基础样式。
多皮肤的博客样式管理是一件麻烦的事情，它涉及了继承，覆盖等多种因素。我对于CSS的使用不是非常了解，也没有干过如此有技术要求的项目。园子里的CSS专家不少，不妨趁此机会来讨论一下该如何为这样的“多主题”系统设计CSS的管理方式呢？
可以看出老赵郁闷了……
CSS的选择器方案，在博客这样的系统中的确会遇到这种郁闷的问题