Blog > 工作随笔, 用户体验设计 > CSS框架带来的效率提升

CSS框架带来的效率提升

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

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

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

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

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

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

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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight:normal;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
body {
line-height: 1;
color: #000;
background: #FFF;
}
ol, ul, li {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

18条评论

  1. 虾米 says:

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

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

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

  2. 5key says:

    @虾米:

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

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

  3. v. says:

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

  4. Along says:

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

  5. 波希米亚 says:

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

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

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

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

  6. lin516 says:

    学习了

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

    第一次过来留言~~Hoho

  8. 5key says:

    @阿里满满

    嘿嘿,欢迎光临 :)

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

  9. underone says:

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

  10. CSS says:

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

  11. 5key says:

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

  12. PigZ says:

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

  13. 5key says:

    @ pigz

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

  14. Pingback: 城市天空 » CSS框架的相关汇总(CSS Frameworks)

  15. Pingback: Frameworks) CSS框架的相关汇总(CSS | IN Revel

  16. haha says:

    colaCSS也是一个CSS框架

  17. DIV+CSS says:

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

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>