Hello World
Spiga

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

2009-11-10 19:56 by 老赵, 15677 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; }

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

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

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

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

36 条回复

  1. JimLiu
    *.*.*.*
    链接

    JimLiu 2009-11-10 20:03:00

    可以看出老赵郁闷了……
    CSS的选择器方案,在博客这样的系统中的确会遇到这种郁闷的问题

  2. 老赵
    admin
    链接

    老赵 2009-11-10 20:06:00

    @JimLiu
    是啊,不容易,我被干过好几次了……

  3. 小眼睛老鼠
    *.*.*.*
    链接

    小眼睛老鼠 2009-11-10 20:32:00

    基础元素最好不设置设置布局属性

  4. Brush
    *.*.*.*
    链接

    Brush 2009-11-10 20:45:00

    成功在于细微之处, 顶一个.

    另:本人也无CSS管理方面的经验.

  5. Gnie
    *.*.*.*
    链接

    Gnie 2009-11-10 21:02:00

    感觉都不错啊,老赵过于细微了吧~

  6. winter-cn
    *.*.*.*
    链接

    winter-cn 2009-11-10 21:38:00

    个人对CSS设计感觉很差

  7. 明天过节[未注册用户]
    *.*.*.*
    链接

    明天过节[未注册用户] 2009-11-10 21:59:00

    这样的文章就不要发首页了,你怎么越来越和吉日一个德行。

  8. 老赵
    admin
    链接

    老赵 2009-11-10 22:17:00

    @明天过节
    嘿嘿,好不容易给您抓住一个把柄是不?
    加油,快用力踩啊,这样的机会不多的。

  9. canbeing
    *.*.*.*
    链接

    canbeing 2009-11-10 22:17:00

    CSS模式似乎还很不成型

  10. 老赵
    admin
    链接

    老赵 2009-11-10 22:18:00

    Gnie:感觉都不错啊,老赵过于细微了吧~


    截图的问题还是很明显的吧……

  11. 老赵
    admin
    链接

    老赵 2009-11-10 22:47:00

    canbeing:CSS模式似乎还很不成型


    CSS模式是指什么?

  12. Wuya
    *.*.*.*
    链接

    Wuya 2009-11-10 22:58:00

    “希望可以让浏览效果更加“和谐””
    我觉得你过于滥用和谐二字了,你的大部分博客文章确实不错,不过居然连30%占有率的IE6都不支持,如果您曾经遇到过《http://files.cnblogs.com/JeffreyZhao/no-ie6.xml》这样的页面,肯定感觉很不爽。
    既然你喜欢将几乎所有文章发到首页(不论文章是否有传播知识的价值),为什么还故做聪明的搞这种怪异的设置?

  13. Wuya
    *.*.*.*
    链接

    Wuya 2009-11-10 23:00:00

    特意在网吧的机器下载了一个FIREFOX来回复,我也挺无聊的。

  14. 老赵
    admin
    链接

    老赵 2009-11-10 23:02:00

    @Wuya
    “和谐”该咋理解?
    把所有文章发到首页是吸引更多人来讨论,顺便也可以更好地吸引IE6点进来咯。
    以前IE6大约占25%的浏览量,现在博客访问量比当时提高50%,但是IE6已经消灭了,多有成就感啊。

  15. 老赵
    admin
    链接

    老赵 2009-11-10 23:05:00

    Wuya:特意在网吧的机器下载了一个FIREFOX来回复,我也挺无聊的。


    恭喜啊,您也为消灭IE6出了一份力,多谢支持!
    看到那张页面自然不爽,不过想想抛弃IE6多好,包涵包涵啊,呵呵。

  16. winter-cn
    *.*.*.*
    链接

    winter-cn 2009-11-10 23:25:00

    Jeffrey Zhao:
    @明天过节
    嘿嘿,好不容易给您抓住一个把柄是不?
    加油,快用力踩啊,这样的机会不多的。


    老赵这态度 虚心接受 坚决不改啊 - -!

  17. winter-cn
    *.*.*.*
    链接

    winter-cn 2009-11-10 23:27:00

    Wuya:
    “希望可以让浏览效果更加“和谐””
    我觉得你过于滥用和谐二字了,你的大部分博客文章确实不错,不过居然连30%占有率的IE6都不支持,如果您曾经遇到过《http://files.cnblogs.com/JeffreyZhao/no-ie6.xml》这样的页面,肯定感觉很不爽。
    既然你喜欢将几乎所有文章发到首页(不论文章是否有传播知识的价值),为什么还故做聪明的搞这种怪异的设置?


    个人博客跟产品是两码事嘛
    不过这对于一些非PC设备上的用户是不公平的 WinCE上还没有IE7呢

  18. 老赵
    admin
    链接

    老赵 2009-11-10 23:47:00

    winter-cn:
    老赵这态度 虚心接受 坚决不改啊 - -!


    因为我其实……没觉得这文章绝对不能放,应该属于边缘地区,而且几篇里就一篇,放纵就放纵了,恩恩……

  19. 老赵
    admin
    链接

    老赵 2009-11-10 23:48:00

    @winter-cn
    我倒真没考虑wince……

  20. 沉默杨仔
    *.*.*.*
    链接

    沉默杨仔 2009-11-11 00:01:00

    实话实说,光这圈子人消除IE6起不了什么作用,最关键的是目标客户,你按IE7标准搞个网站。客户拿IE6来看,他才不管什么IE版本,付了钱按他的标准来才行。
    呵呵,经常要拖着IETESTER来测试,也是件很不爽的事情。

  21. 博客园团队
    *.*.*.*
    链接

    博客园团队 2009-11-11 00:03:00

    由于多数模板使用的是不同的Html结构,有时为了修改所有模板中某些部分的显示效果,只能使用宽泛的选择器。
    老赵的这篇文章提醒了我们必须要解决这个问题。

    我们现在提供的解决方法是:让用户可以禁用公用CSS(common.css,common2.css)。
    设置方法:在后台管理》选项中选择“禁用公用CSS(common.css,common2.css)”。

  22. 老赵
    admin
    链接

    老赵 2009-11-11 00:09:00

    @博客园团队
    多谢,这是新功能吗?
    下次在半夜里我试试看。:)

  23. 老赵
    admin
    链接

    老赵 2009-11-11 00:10:00

    @沉默杨仔
    即便没有太大效果,从技术圈子开始抵制IE6也是好的。
    而且现在看来,技术圈子抵制IE6也是不那么容易的,呵呵。

  24. 博客园团队
    *.*.*.*
    链接

    博客园团队 2009-11-11 00:16:00

    @Jeffrey Zhao
    刚增加的功能。

  25. Cat Chen
    *.*.*.*
    链接

    Cat Chen 2009-11-11 00:22:00

    暂时我也没找到很好的办法管理CSS。现在有一些软件可以查看改变某个样式时影响一个已知页面上的多少元素,但对于不确定的页面结果也是不确定的。

  26. 老赵
    admin
    链接

    老赵 2009-11-11 00:29:00

    博客园团队:
    @Jeffrey Zhao
    刚增加的功能。


    多谢,辛苦了。这个功能不容易,表示支持和慰问,呵呵。

  27. Brush
    *.*.*.*
    链接

    Brush 2009-11-11 09:03:00

    Jeffrey Zhao:
    @Wuya
    “和谐”该咋理解?
    把所有文章发到首页是吸引更多人来讨论,顺便也可以更好地吸引IE6点进来咯。
    以前IE6大约占25%的浏览量,现在博客访问量比当时提高50%,但是IE6已经消灭了,多有成就感啊。



    我就是迫于RSS阅读器读园子里的代码有问题跑到老赵的原文又提示我不要用IE6才升级到IE8的
    PS:
    1.本人一向是熟悉的网站用360浏览器, 不熟悉的用FF
    2.本人大多数只看文章不留名, 嘿嘿.

  28. chy710
    *.*.*.*
    链接

    chy710 2009-11-11 09:35:00

    建议园子不要使用共公的css,全部放在每个皮肤所属的css里。这样用户就自己定制了。

  29. airwolf2026
    *.*.*.*
    链接

    airwolf2026 2009-11-11 11:20:00

    Brush:

    Jeffrey Zhao:
    @Wuya
    “和谐”该咋理解?
    把所有文章发到首页是吸引更多人来讨论,顺便也可以更好地吸引IE6点进来咯。
    以前IE6大约占25%的浏览量,现在博客访问量比当时提高50%,但是IE6已经消灭了,多有成就感啊。



    我就是迫于RSS阅读器读园子里的代码有问题跑到老赵的原文又提示我不要用IE6才升级到IE8的
    PS:
    1.本人一向是熟悉的网站用360浏览器, 不熟悉的用FF
    2.本人大多数只看文章不留名, 嘿嘿.


    哈哈.
    360浏览器用的啥内核啊?
    看到360还是会想到3721,虽然现在家里的电脑也用360卫士了...

  30. Sunny Peng
    *.*.*.*
    链接

    Sunny Peng 2009-11-11 11:55:00

    能不能搞得像网易博客那样可以拖动的版块?那样拖的话,可以自己定义那些位置了

  31. 老赵
    admin
    链接

    老赵 2009-11-11 12:20:00

    @Sunny Peng
    很难,这是两种不同的皮肤设计版式。
    不过,博客园可以自定义JavaScript啊,程序员应该用程序员的方式来搞,呵呵。

  32. Brush
    *.*.*.*
    链接

    Brush 2009-11-11 12:49:00

    airwolf2026:

    Brush:

    Jeffrey Zhao:
    @Wuya
    “和谐”该咋理解?
    把所有文章发到首页是吸引更多人来讨论,顺便也可以更好地吸引IE6点进来咯。
    以前IE6大约占25%的浏览量,现在博客访问量比当时提高50%,但是IE6已经消灭了,多有成就感啊。



    我就是迫于RSS阅读器读园子里的代码有问题跑到老赵的原文又提示我不要用IE6才升级到IE8的
    PS:
    1.本人一向是熟悉的网站用360浏览器, 不熟悉的用FF
    2.本人大多数只看文章不留名, 嘿嘿.


    哈哈.
    360浏览器用的啥内核啊?
    看到360还是会想到3721,虽然现在家里的电脑也用360卫士了...



    360用的还是IE内核,所以我只用它来浏览经常去的网站.

  33. 最初的模样
    *.*.*.*
    链接

    最初的模样 2009-11-11 13:20:00

    p
    {
    margin: 5px auto 5px auto;
    text-indent:0px;
    }
    这种为啥不缩写呢
    p
    {
    margin: 5px auto;
    text-indent:0px;
    }

  34. 最初的模样
    *.*.*.*
    链接

    最初的模样 2009-11-11 13:50:00

    加上!important,把所有块级元素恢复到默认设置
    div,form,img,ul,ol,li,dl,dt,dd,p {margin: 0!important; padding: 0!important; border: 0!important; }

  35. zmxmiss
    *.*.*.*
    链接

    zmxmiss 2009-11-14 17:39:00

    左右--》所有

  36. zmxmiss
    *.*.*.*
    链接

    zmxmiss 2009-11-14 17:39:00

    要干掉ie6 得把左右做做盗版xp的刻盘文件里面的ie6换掉吧
    还是要从源头消灭

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我