CSS框架带来的效率提升

  1. 利用CSS框架进行高效率的站点开发
  2. CSS框架的利与弊(上)
  3. CSS框架的利与弊(下)

前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君,他有一个小的团体,主要是做欧美的外包项目。可以说做的站点很多都是大同小异。在看完前面的介绍后,他停下手头的工作花一天时间初步的建立了一套自己的框架。接下来的一周,他们完成了10个项目的工作。在以前,每周他们大概可以完成5~6个(每个项目的工作量基本相同)。200%的效率提升!?

建立这套CSS框架中有哪些感受?A君给了我这样的回复:

  1. 制定框架的人应该很充分的理解现有项目的情况
  2. 一定要仔细,将可能出现的问题考虑清楚
  3. 各浏览器的兼容一定要做好
  4. 宁可花时间让整个团队清楚的了解整套框架,磨刀不误砍柴工

看来真是惭愧,A君的执行力很强,很快的就理解并执行下去。而我一直在提倡CSS框架,却一直没有去具体的实施下去。忙不是借口哇~~~~

大家要我放出自己定义的框架。惭愧~实际上我还没整好。先放一下我对reset.css的整理吧。

下载: reset.css
  1. html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. outline: 0;
  6. font-weight:normal;
  7. font-size: 12px;
  8. font-family:Arial, Helvetica, sans-serif;
  9. }
  10. body {
  11. line-height: 1;
  12. color: #000;
  13. background: #FFF;
  14. }
  15. ol, ul, li {
  16. list-style: none;
  17. }
  18. table {
  19. border-collapse: separate;
  20. border-spacing: 0;
  21. }
  22. caption, th, td {
  23. text-align: left;
  24. font-weight: normal;
  25. }

Random Posts

18 条评论 发表在“CSS框架带来的效率提升”上

  1. 虾米 说到:

    img这个我公司不让全局定义border: 0
    说在有的时候要用这个属性,不要全局定义,我搞不清楚,啥时候图片会用这个属性.

    当图片上有链接的时候还会有框框出来,很恶心,不过也没办法了.

    哈哈,我自己的网站上的CSS都是写在一行里,没有像成程序那样去格式化CSS,剩几K代码.

    [回复]

  2. 5key 说到:

    @虾米:

    呵呵。我看到你在关于css弊端的那篇帖子上的留言了。在我看来,制定这套框架的人必须很清楚整个项目的情况,有着很清晰的思路。这样制作出来的东西才能尽量去避免一些问题。

    上面提到的那位朋友,公司承接的是国外某家公司的大部分项目。设计稿的风格上没有太大的变化,在这种情况下框架对于他们提升效率有很大的帮助。

    [回复]

  3. v. 说到:

    ol, ul, li {
    list-style: none;
    }
    这里我觉得li不要设置的好,因为后期如果有需要设置list-style的话还需要再设一遍li

    [回复]

  4. Along 说到:

    list-style默认的效果不是很好控制 建议使用背景模拟,所以整体none一下,还是可以的。

    [回复]

  5. 波希米亚 说到:

    http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css

    我们现在基本都用YUI这个,都一样的东西,可以更“本地化”一下,
    适合自己的(或自己团队的)才是最好的,
    大家统一遵守和使用,才能保持统一,提高协作开发的效率。

    个人用它只能是个偷懒工具,大家一起才能提现威力,哈

    P.S 站点越来越漂亮了,很好,很简洁 :D

    [回复]

  6. lin516 说到:

    学习了

    [回复]

  7. 我也是在看了你这篇《利用CSS框架进行高效率的站点开发》后马上实施了。
    我公司主要是做日本的,却是风格都差不多,这套东西很全面很系统,都和我们公司PHP的专业模式走到一起来了。呵呵~
    就是有个小问题,如果想在Yslow中测试的话,会显示外部CSS样式过多。

    第一次过来留言~~Hoho

    [回复]

  8. 5key 说到:

    @阿里满满

    嘿嘿,欢迎光临 :)

    很多东西有利也有弊。yslow的要求很严格。对于小型的项目,几个外部的css也不会给网站带来多大的负载。

    [回复]

  9. underone 说到:

    也许做皮也应该先准备这个。。。。。。。。恩。。。。。。。。。。

    [回复]

  10. abc 说到:

    扯谈

    [回复]

  11. CSS 说到:

    对于经常制作不同风格网站的人来说,这个框架只能定义一下很基本的东西。
    我现在倾向于用*把所有的元素初始化,然后在给一些元素补上他们常用的样式,比如说H、STRONG等的bold。

    [回复]

  12. 5key 说到:

    10楼的那个abc。
    你ztmd的幽默。既然你觉得我在扯淡,干嘛在你的博客里转我两篇帖?

    [回复]

  13. PigZ 说到:

    5key有Q没?
    偶最近也在学这些方面的东西.可否通过QQ交流一下?

    [回复]

  14. 5key 说到:

    @ pigz

    最近上Q不多。msn吧:5key@live.cn

    [回复]

  15. [...] 下载使用并学习这些框架能让我们尽快的建立自己的框架提供意识基础和借鉴,同时也为我们的工作带来大大的效率。比如这篇文章(CSS框架带来的效率提升)提 到的“一位北京的朋友A君,他有一个小的团体,主要是做欧美的外包项目。可以说做的站点很多都是大同小异。在看完前面的介绍后,他停下手头的工作花一天时 间初步的建立了一套自己的框架。接下来的一周,他们完成了10个项目的工作。在以前,每周他们大概可以完成5~6个(每个项目的工作量基本相同)。200%的效率提升!?” [...]

  16. [...] 下载使用并学习这些框架能让我们尽快的建立自己的框架提供意识基础和借鉴,同时也为我们的工作带来大大的效率。比如这篇文章(CSS框架带来的效率提升)提到的“一位北京的朋友A君,他有一个小的团体,主要是做欧美的外包项目。可以说做的站点很多都是大同小异。在看完前面的介绍后,他停下手头的工作花一天时间初步的建立了一套自己的框架。接下来的一周,他们完成了10个项目的工作。在以前,每周他们大概可以完成5~6个(每个项目的工作量基本相同)。200%的效率提升!?” [...]

  17. haha 说到:

    colaCSS也是一个CSS框架

    [回复]

  18. DIV+CSS 说到:

    看了楼上兄弟们回的贴子……
    LZ的
    body {
    line-height: 1;
    }
    这个我觉得定义成line-height: 20px;
    比较好点……
    这样很适合文章类的开发……

    [回复]

留下回复