代码改变世界

如何对一个博客系统进行CSS管理?

2009-11-10 19:56 Jeffrey Zhao 阅读(...) 评论(...) 编辑 收藏

忽然发现,我的博客皮肤又改变了,这次是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; }

那么,为什么这样的事情总是一而再,再而三地发生呢?这无法不让我多想一些。似乎这次的问题是由两方面原因造成的:

  1. 博客园修改了过于宽泛的选择器:p是个非常基础的CSS选择器,涉及到整个页面的p元素,对他进行修改就好比改变了类库中的基本类型。对于这样的修改一定要小心,因为影响过于巨大,试想如果.NET修改了Object类的行为那么会造成什么后果呢?
  2. 皮肤的样式直接依赖了最基础的样式:如果说上一点是主要因素,那么这一点就是次要因素。由于about区域的文字直接依赖于基本上“毫无关联”的基础样式,导致了一些难以预料的事情发生。因此,最终的解决方案也是使用了限制更优先的选择器来覆盖基础样式。

多皮肤的博客样式管理是一件麻烦的事情,它涉及了继承,覆盖等多种因素。我对于CSS的使用不是非常了解,也没有干过如此有技术要求的项目。园子里的CSS专家不少,不妨趁此机会来讨论一下该如何为这样的“多主题”系统设计CSS的管理方式呢?