2009.02 24

模块化 CSS – 更有效地管理CSS

标签: , ,
Featured, 资源共享

modular css

在刚学习CSS初期，就接触了"模块化CSS"这样的概念，不过，一直没有很好的理解。说起来，理由很简单：因为几乎所有的代码都是为了博客的设计，而像博客这么小的架构，CSS文件根本不用多，因为本身代码量就小，使用不同表现形式的页面模板并不多，少反而更方便管理。所以，对于模块化CSS的理解很乱，直接导致自己一直认为下面的分法是非常合理的：

  1. reset.css // 对浏览器的默认样式进行重设
  2. layout.css // 管理页面的布局
  3. typeset.css // 图文的编排与
  4. color.css // 统一管理颜色的搭配
  5. print.css // 打印效果样式
  6. ie.css // 把对ie的hack单独分开

其实不然，最近工作，接触了公司的网站，leader要自己写CSS的写作规范，以及一些HTML的统一规范；并且写了新的频道/页面/卖场。才发现，原来，上面的分法还是太理想化了。以个人来说，个人认为可以用下面的分割法。先写下，然后，让我们对比这两种分法，找到更好的解决CSS文件管理的合适的CSS模块化分法：

  1. reset.css
  2. header.css // 头部的所有样式
  3. container.css // 除头部/底部外的中间区域样式
  4. footer.css // 底部样式
  5. print.css
  6. ie.css

我们可以看到，不同的有三个CSS文件。第一种分法是种不错的做法，但管理起来比较麻烦，虽然是"模块化" 了，把表现的内容的样式分开。但由于每个人都不可能百分百了解每个CSS文件里面的内容，所以，可能导致下面的问题：

一、效率问题与最终目的

在网站内容上面，如果改某一个区域的内容，可能要几个CSS都改。这样一来，本来简单的一个修改，开始变得复杂起来。并且，如果多个都改，可能会使我们忽略了某些东西，又需要进一步调试，这样不仅肯使最终目的实现延后，还是一个效率的问题。

二、调用尽可能少的CSS文件

大多楼情况下，一个网站都是分成头部，中部和底部，并且，一般，要做新的频道/页面之类的东西，都不会变动头部和底部，而只是变动中间部分。这样一来，所有CSS文件都要调用，因为，HTML和CSS的模块化并不一致。这样，就会导致服务器承受更多的压力。这是一个方面。另一个方面是，如果新页面中某些元素与其他页面有冲突，我们可能要搞一大堆关于优先性选择的代码，增加代码量。这些都不是我们想要的。这就为什么要把header.css和footer.css分开来的原因。

三、多人合作上的问题

如果我们多个人在工作，大家的分工可能是，有人完成头部的导航，有人完成底部的搜索条，有人完成中部新页面的构建。这样一来，大家都同时在改几个文件，并且，改的东西不同。如果要更新到服务器，就要先对比，再更新。（当然，现在有版本管理这样的软件。但是，同时工作的话，版本也是一个问题，要相信，或许更新永远都改不上改变。）

结语：

当然，上面的分法，只是一个简单的模型。不同网站的架构，可能需要更细化的分法。这里需要提醒的一点是，模块化CSS，我们应该时刻明确，我们是为了方便管理，方便修改，方便多人合作，而不是简单的分割。如果说有什么建议，我想，CSS的模块化，应该尽量与HTML的模块化相一致。这里的一致说的是，无论是在文件的分割上，还是在CSS内容的分割上，与HTML的模块化一致。这将会更有利于我们的工作。

而你，又是怎么想的呢？

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, 资源共享 »

57

  1. 2009.02.24 10:47 pm
    sqybi(visit): [回复]

    沙发wow~

  2. 2009.02.24 10:47 pm
    sqybi(visit): [回复]

    成功啦~

  3. 2009.02.24 10:48 pm
    Zoll(visit): [回复]

    沙发党落座地板

  4. 2009.02.24 10:49 pm
    leehow这个VIP(visit): [回复]

    我是来买菜的，o(╯□╰)o。

  5. 2009.02.24 10:49 pm
    Zoll(visit): [回复]

    额。。太高深了。。没看得懂。。

  6. 2009.02.24 10:50 pm
    fisio(visit): [回复]

    沙发~

  7. 2009.02.24 10:53 pm
    茶乐(visit): [回复]

    @all: 天啊，你们也太快了吧

  8. 2009.02.24 10:54 pm
    fisio(visit): [回复]

    晕，就上了个公交车，沙发没了

  9. 2009.02.24 10:55 pm
    茶乐(visit): [回复]

    你是用container.css啊，我经常用body.css

  10. 2009.02.24 10:55 pm
    茶乐(visit): [回复]

    我服了。。我认输

  11. 2009.02.24 10:55 pm
    恬玮儿(visit): [回复]

    默默的观看抢沙发。。。。

  12. 2009.02.24 11:10 pm
    sofish(visit): [回复]

    @sqybi: 强大，恭喜，谢谢。

    @Zoll: 哈哈，sqybi小朋友超强的，最近这么少更新，都被他沙发。你好像 也有在学CSS吧，可以看看管理CSS方面的东西。

    @leehow这个VIP: 今天在车上，才想shawn和leehow怎么都不出现，然后，就看到shawn上GT，并且更新了，现在又见你。哇…

    @fisio: 第6排的沙发！一起囧。

    @茶乐: 命名嘛，哈哈，body会不会导致误解？

    @恬玮儿: …好孩子，懂得排队。

  13. 2009.02.24 11:15 pm
    leehow这个VIP(visit): [回复]

    @sofish:说明，不同的两个人在不同的地方，有可能做点相类似的事情，当然这要拜你今天有新文章所赐。

  14. 2009.02.24 11:19 pm
    sofish(visit): [回复]

    @leehow这个VIP: 哈哈。相信有这事。而且，今天是特别的一天，太好了。真是个好日子。

  15. 2009.02.24 11:57 pm
    toydime(visit): [回复]

    这抢沙发可太厉害了，已阅，很好

  16. 2009.02.24 11:57 pm
    xiaorsz(visit): [回复]

    学习了，搞 wordpress 一般一两个 CSS 就行了！和大型网站还是不能比的啊！！

  17. 2009.02.25 12:18 am
    Andor(visit): [回复]

    还没有制作大型站点的经历，不过以前看过淘宝的介绍，模块化很重要，至于 WordPress 的主题嘛，写在一个文件中就行了
    p.s. 该死的 akismet 给我平反了没~

  18. 2009.02.25 12:33 am
    sofish(visit): [回复]

    @toydime: 竟然是领导型的指导。

    @xiaorsz: 嗯，在型网站很有必要分。WP架构非常小，并且，一般都只是我们自己在用。

    @Andor: 真的被平反了。刚才看了后台才知道。关于分块，以前理解不是很好，最近开始工作，并且，看了一些相应的文章，觉得，有了进一步的理解。

  19. 2009.02.25 4:06 am
    feicun(visit): [回复]

    嗯，刚开始对CSS有点了解，现在对CSS的文章都比较感兴趣

  20. 2009.02.25 9:07 am
    corore(visit): [回复]

    今天你模块化了吗？。。。。

  21. 2009.02.25 10:13 am
    allenle(visit): [回复]

    近期我也在做全站的CSS优化，碰到和你一样的问题。在优化的过程当中，大的排版结构，我用一些CSS Framework，例如：Blueprint，尽管现在CSS Framework功能还不强大，但规范了一些写法和用法。再细节的一些样式，尽量“合并同类项”。非常同意你的：减少CSS文件的数量。

    也就这些吧，请赐教。

  22. 2009.02.25 11:26 am
    囧囧有神的(visit): [回复]

    o(╯□╰)o~
    如今的CSS~~
    先框架~
    又模块……
    好像越来越麻烦了~
    还有针对IE的HACK我通常分成ie6.css和ie7.css~
    最近正在写ie8.csso(>﹏<)o

  23. 2009.02.25 12:32 pm
    许三品(visit): [回复]

    专业课，学习！

  24. 2009.02.25 1:03 pm
    NetPuter(visit): [回复]

    昨晚鲜果看第一遍，第二遍，感觉貌似不懂……
    模块化是有好处，尤其是对所谓模板的模板来说，很好用。
    同意最后一句话，HTML和CSS的结构相关联。
    PS，我也觉得我说得好乱……

  25. 2009.02.25 1:30 pm
    herb(visit): [回复]

    多人协作的CSS也可以用版本控制嘛~

  26. 2009.02.25 1:37 pm
    sofish(visit): [回复]

    @feicun: 哈哈，尽量拿去用。

    @allenle: 没有尝试过CSS framework，有空得去试试，好像需要照顾的CSS hack就比较少了。

    @囧囧有神的: 分得很清=,=…

    @许三品: 免费阅读。

    @NetPuter: 太久写文章了。今天MS才写了两三篇，竟然就退步这么快？

    @herb: 我要表达的是”要相信，或许更新永远都改不上改变。”…. 而不是说，不可以用版本管理。 =,=… 表达能力在变差。

  27. 2009.02.25 3:55 pm
    Shawn(visit): [回复]

    做了专业设计人员，果然谈论的话题也不一样了，哈哈。

  28. 2009.02.25 4:05 pm
    welee(visit): [回复]

    我认为可以将 header.css 和 footer.css 合并，一般这两个部分没多少行，不过你的构思启发了我，要好好向你学习学习，呵呵！

  29. 2009.02.25 4:29 pm
    sofish(visit): [回复]

    @Shawn: 心得心得。

    @welee: 嗯，这样只是举个例子，在实际运用的时候，可能会需要更复杂的分法。

    互相学习，互相学习。

  30. 2009.02.25 5:23 pm
    nooidea(visit): [回复]

    我其实比较期待收藏夹能系统的从基础到深入的出几个专题。。 嘿嘿～

    要不摸不着头。，看起一本书吧，又没有太大的毅力。。

  31. 2009.02.25 8:09 pm
    会律博客(visit): [回复]

    默默的看着你们沙发到地板，啥时候咱也抢个去，可能性那是小的说！

  32. 2009.02.25 10:20 pm
    左岸读书(visit): [回复]

    这样做很有条理性！学习！

  33. 2009.02.26 4:17 pm
    aunsen(visit): [回复]

    一般人还真看不懂=.=

  34. 2009.02.26 4:30 pm
    mojojo(visit): [回复]

    领教了

  35. 2009.02.26 6:17 pm
    岛上猫(visit): [回复]

    过来带酱油
    去年学CSS的时候 一般都是在一个css文件里分类
    加点注释 分割线啊 什么的 这样编辑的时候一下子就搞定了 但是有个问题就是这样的css文件很容易臃肿。
    个人认为 还是第二种可能比较适合我

  36. 2009.02.26 8:07 pm
    动画片(visit): [回复]

    老大你好久没有更新博客了啊 这个我现在不研究css

  37. 2009.02.27 5:51 am
    lonqi(visit): [回复]

    第一次看到这概念。看来很不错。

  38. 2009.02.27 1:09 pm
    jokul(visit): [回复]

    学习了，收藏了，呵呵！

  39. 2009.02.27 6:53 pm
    囧囧有神的(visit): [回复]

    我貌似有头像了吧~~@_@
    测试ing~~

  40. 2009.03.02 2:50 am
    life97(visit): [回复]

    原来这样叫模块化。又学习了。谢谢。

  41. 2009.03.02 3:24 pm
    WordPress啦!(visit): [回复]

    CSS文件的细分，感觉比较麻烦
    虽说有效的管理了文件，但是，多出来那么多的文件，感觉挺乱的

  42. 2009.03.02 10:24 pm
    welee(visit): [回复]

    哀~sofish 你的文章被盗了！！！
    http://www.52css.com/article.asp?id=1004

  43. 2009.03.02 10:44 pm
    sofish(visit): [回复]

    @welee: 没想到相对比较有影响力了，还抄。没版权意识！感谢welee…

  44. 2009.03.19 10:17 pm
    DesignWay(visit): [回复]

    好像有些朦胧!!!

  45. 2009.03.23 3:50 pm
    lutuzhi(visit): [回复]

    高产啊，我是顺着seo摸过来的

  46. 2009.03.29 3:40 pm
    Bruce Guo(visit): [回复]

    这两种分类方法可以结合着使用，把CSS的分类看成有两个层次，第一个层次是区域性的（你的第二种方法），第二个层次是每一个区域内部的（比如可以在header.css和 footer.css文件内部使用你的第二种方法 ）。以上仅是个人浅见。

  47. 2009.03.29 3:42 pm
    Bruce Guo(visit): [回复]

    @Bruce Guo:更正如下：
    第一个层次是区域性的（你的第二种方法），第二个层次是每一个区域内部的（比如可以在header.css和 footer.css文件内部使用你的第一种方法 ）。

  48. 2009.03.29 5:52 pm
    sofish(visit): [回复]

    @Bruce Guo: 嗯？怎么说呢？ 我们还需要考虑的另外一个问题是，减少HTTP请求。

  49. 2009.04.09 6:07 pm
    lutuzhi(visit): [回复]

    @sofish:能具体说下http请求的问题吗？

  50. 2009.04.10 10:06 am
    大话西游(visit): [回复]

    不错，合理的规划，带来更佳的工作效率。

  51. 2009.04.29 3:56 pm
    hubeiq(visit): [回复]

    我用的CSS有一点不一样，请看：
    container.css
    head.css
    main.css
    foot.css
    style.css

  52. 2009.10.06 10:18 pm
    Cavano(visit): [回复]

    楼主分析的不错…
    不过针对多人合作开发这块有点一笔带过了..
    有机会一起讨论下,更具体的模块化!

  53. 2009.11.10 7:50 pm
    cz(visit): [回复]

    呵呵，第一种分法也太细了。我的分法：
    reset.css
    common.css
    layout.css
    ie.css
    子页再放内部样式

  54. 2009.12.04 6:19 pm
    bolo(visit): [回复]

    模块化CSS不一定要分开文件的，写成Class也可以

  55. 2009.12.11 2:01 pm
    柳云飞(visit): [回复]

    我的分法没有这么详细

  56. 2010.04.09 6:55 am
    郑义文(visit): [回复]

    正在用thematic做模板，感觉这个的css模块化好乱。。。

  57. 2010.05.08 5:13 pm
    tony(visit): [回复]

    连续看了很多篇文章,很好的博客.想博主学习了.非常感谢

Additional comments powered by BackType