前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君,他有一个小的团体,主要是做欧美的外包项目。可以说做的站点很多都是大同小异。在看完前面的介绍后,他停下手头的工作花一天时间初步的建立了一套自己的框架。接下来的一周,他们完成了10个项目的工作。在以前,每周他们大概可以完成5~6个(每个项目的工作量基本相同)。200%的效率提升!?
建立这套CSS框架中有哪些感受?A君给了我这样的回复:
- 制定框架的人应该很充分的理解现有项目的情况
- 一定要仔细,将可能出现的问题考虑清楚
- 各浏览器的兼容一定要做好
- 宁可花时间让整个团队清楚的了解整套框架,磨刀不误砍柴工
看来真是惭愧,A君的执行力很强,很快的就理解并执行下去。而我一直在提倡CSS框架,却一直没有去具体的实施下去。忙不是借口哇~~~~
大家要我放出自己定义的框架。惭愧~实际上我还没整好。先放一下我对reset.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;
- }



img这个我公司不让全局定义border: 0
说在有的时候要用这个属性,不要全局定义,我搞不清楚,啥时候图片会用这个属性.
当图片上有链接的时候还会有框框出来,很恶心,不过也没办法了.
哈哈,我自己的网站上的CSS都是写在一行里,没有像成程序那样去格式化CSS,剩几K代码.
[回复]
@虾米:
呵呵。我看到你在关于css弊端的那篇帖子上的留言了。在我看来,制定这套框架的人必须很清楚整个项目的情况,有着很清晰的思路。这样制作出来的东西才能尽量去避免一些问题。
上面提到的那位朋友,公司承接的是国外某家公司的大部分项目。设计稿的风格上没有太大的变化,在这种情况下框架对于他们提升效率有很大的帮助。
[回复]
ol, ul, li {
list-style: none;
}
这里我觉得li不要设置的好,因为后期如果有需要设置list-style的话还需要再设一遍li
[回复]
list-style默认的效果不是很好控制 建议使用背景模拟,所以整体none一下,还是可以的。
[回复]
http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css
我们现在基本都用YUI这个,都一样的东西,可以更“本地化”一下,
适合自己的(或自己团队的)才是最好的,
大家统一遵守和使用,才能保持统一,提高协作开发的效率。
个人用它只能是个偷懒工具,大家一起才能提现威力,哈
P.S 站点越来越漂亮了,很好,很简洁
[回复]
学习了
[回复]
我也是在看了你这篇《利用CSS框架进行高效率的站点开发》后马上实施了。
我公司主要是做日本的,却是风格都差不多,这套东西很全面很系统,都和我们公司PHP的专业模式走到一起来了。呵呵~
就是有个小问题,如果想在Yslow中测试的话,会显示外部CSS样式过多。
第一次过来留言~~Hoho
[回复]
@阿里满满
嘿嘿,欢迎光临 :)
很多东西有利也有弊。yslow的要求很严格。对于小型的项目,几个外部的css也不会给网站带来多大的负载。
[回复]
也许做皮也应该先准备这个。。。。。。。。恩。。。。。。。。。。
[回复]
扯谈
[回复]
对于经常制作不同风格网站的人来说,这个框架只能定义一下很基本的东西。
我现在倾向于用*把所有的元素初始化,然后在给一些元素补上他们常用的样式,比如说H、STRONG等的bold。
[回复]
10楼的那个abc。
你ztmd的幽默。既然你觉得我在扯淡,干嘛在你的博客里转我两篇帖?
[回复]
5key有Q没?
偶最近也在学这些方面的东西.可否通过QQ交流一下?
[回复]
@ pigz
最近上Q不多。msn吧:5key@live.cn
[回复]
colaCSS也是一个CSS框架
[回复]
看了楼上兄弟们回的贴子……
LZ的
body {
line-height: 1;
}
这个我觉得定义成line-height: 20px;
比较好点……
这样很适合文章类的开发……
[回复]