打印

[讨论] [近期话题]如何合理的规划站点的CSS样式表

这个方法貌似不错。。

引用:
原帖由 rainoxu 于 2007-7-12 18:10 发表
我的一点心得是:

1.做一个全局使用的CSS,主要是和布局有关的,网站的整体风格往往都是差不多统一的,至少在框架上是不会有太大的异同,所以,可以把布局的样式单独分离出来,做为一个基础,各个细节写在相应的CSS中 ...
俺也是这么做的。。建一个style...控制body的字体,font-size,color,float,right,text-align,a等等全局css,再加一个清除浮动的.
clearfix
{
    display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix  */

为了防止FF中div的扩展问题。。。

再建一个base。。控制整站的布局。。如#head #banner #contant #footer..视布局而定。。

还有一个main.css啦,控制其它页面的,,如果一些有表格列数据的地方,,最多加多一个list.css。。
控制表单,表格等等。。。

因为俺做企业站比较多,所以有这些基本上已经足够。。搞新建的时候拷份CSS,,再修改一些就OK了。。
主要是因為各瀏覽器沒有達到一致的標準。
為了兼容不同瀏覽器,我們必須考慮代碼的寫法,有時候為了兼容IE的bug加了一些無所謂的代碼,等回頭看了,有可能會想不起這個代碼究竟是干嘛,用在哪里,有什么作用,刪掉的話樣式卻改變了,這些都可能造成自己代碼混亂的一個原因。
注释不可过泛滥,那样只会增加CSS体积。一般是分功能\分块注释。

另外,要定位某个样式时,记住用“查找”功能键,一定要熟练用“Ctrl+F”。
廉价还是高价? 由水平决定!!
我也说说我在项目中的CSS规划

我基本上的分类是:
1.公用样式文件(common.css),主要包括项目用到的文本样式,如错误信息、提示信息、标注、说明、版权等,这里定义的样式会作用于项目中的所有文件;
2.布局样式文件(layout.css),主要包括项目中所有页面的布局、弹出窗口布局,拿三层结构来说,包括首页、二级、内容页的布局样式;
3.页面模块样式文件(module.css),包括文章列表、表单输入、数据列表、翻页等;

PS:hack一般很少用,除非万不得以,我把它加在相应文件里;

关于CSS的命名是很重要的,方便以后维护,以下是我的个人习惯:
1.命名时采用"_"或"-"分隔符来组成样式名,最好用英文单词组合(不知道的可以用金山词霸嘛),注意中文输入状态下的符号;
2.公用样式一般采用类选择符(例 .error , em.error)与选择符分组,布局样式最外层采用ID选择符(如#headed),模块样式采用类选择符与包含选择符共用。
3.适当增加样式注释或语句注释,也可采用/* 某某某 start */ 与 /* 某某某 end*/ 模块注释;
4.样式语句尽量采用缩写,如果文件过大,可用工具进行压缩,发布的样式文件可以除掉注释。

[ 本帖最后由 welcome58 于 2007-7-18 21:34 编辑 ]

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
21楼不错,
不过不知这样可行不:备分文件像你这么写;页面调用的文件进行一下优化。以后查阅时候找备份不就完了。

TOP

近期正着手准备这个东西!估计要整理好几好几天,到时一起分享!

好文章,特别是回贴的人!希望大家把自己的整站CSS分布规划经验贴出来分享
我怕,我真的怕……

TOP

稍微总结一下:
规划站点的CSS样式有两个原则:

1.不影响现有性能
1.1尽可能的降低http链接数(网易首页将CSS写入到HTML中)
1.2尽可能的压缩文件的大小,类库和网页表现税占得的比重大一些,如果项目比较大类库中的css可以降低CSS的字节数,如果项目较小,类库就变成了一个累赘

2.与项目组达成共识便于多人维护
2.1 命名规则很重要
2.2 注释是一个好方法
2.3 可以借鉴程序开发,写详细的开发文档
greengnn's space/web design
Design your life with Web Standards WEB标准群:46077068

TOP

引用:
原帖由 greengnn 于 2007-7-22 16:15 发表
稍微总结一下:
规划站点的CSS样式有两个原则:

1.不影响现有性能
1.1尽可能的降低http链接数(网易首页将CSS写入到HTML中)
1.2尽可能的压缩文件的大小,类库和网页表现税占得的比重大一些,如果 ...
说的很好,像我是管理论坛的,在风格制作的时候会考虑减少CSS的体积。否则在浏览器加载的时候很慢,当其他的元素已经被加载了,而CSS没有被加载完全。会导致一些错误。所以在网站开发和规划就必须考虑到这点。尽量减少CSS的文件体积和调用。

TOP

(1)例如顶部写完CSS下加个长的/*------------------------------------------------------顶部区域CSS结束------------------------------------------------------------*/ 每个页面大块都是分块注释。
(2)ID和CLASS的取名也规范,我是一般按照先左右后上下的顺序取名字,或者不同功能层取相应的英文名字,到时候一目了然知道哪个CSS是哪个区域内哪个层或功能模块的
(3)容器取名具有继承性,且ID和CLASS用在不同场合。例如最外层是#link,里层的部分就会是.link_tt, 再里层就会是.link_tt_nr等
(4)页面尽量风格统一,能调用其他页面相同CSS的就绝不多写,
(5)写完后花1~2天时间把能缩写的CSS全部改为缩写

[ 本帖最后由 osmn00 于 2007-7-23 00:53 编辑 ]

TOP

引用:
原帖由 awing733 于 2007-7-18 14:40 发表



俺也是这么做的。。建一个style...控制body的字体,font-size,color,float,right,text-align,a等等全局css,再加一个清除浮动的.
clearfix
{
    display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix  */
你这个clearfix在ie7下是有问题的。

TOP

顶上去!!多多交流

TOP

我平时一般也很少有注释,就算有的话,也尽量用英文表示,这样可以减少因为编码的问题,中文注释会变成乱码的情况。
中文写的少,还可以再改一遍,但万一一不小心写的太多了,要改就麻烦了,可能回头自己都不知道了。
再来就是,我一般都是首页会单独写一个样式,所有页面公用的样式也是单独的一个,还有一些公用的组件一个,剩下的就是按照频道来区分的,大致上就是这样。

TOP

还是会写一个公共得css  然后哪些页面需要特定样式比较多的就新建的css
如果只有几个需要特定样式  还是采用内联的多  便于查找和修改
FLASH  诚征友链

TOP

加注释是一个方面,不过会延长工期,其实有些样式只在一个页面使用,或是同一类型页面(比如新闻列表页、新闻内容页),这样的话就不用单独样式表了,直接写在页面里面,然后定义模板,再用模板生成新页面,这样一来只要修改模板页的样式,就可以修改该模板创建的所有页面的样式了。
小弟愚见,望大家指点!

TOP

我是建议用ID的.一是"ID"+"#"就3个字符...二是ID的唯一性.
但是显然不该全部都使用ID.正如大家所言,布局不是那么容易的.所以我总结的经验就是,WIDTH,HEIGHT,BACKGROUND-COLOR,FONT-SIZE,LINE-HEIGHT,等重复率高的,而且根据不同时间段的维护可能要经常修改的属性放到CLASS中去..ID当中以布局的属性为主.但若有重复的也可以放到CLASS中.思路大致是如此.但操作起来还是很麻烦的.第1步你先照自己思路写好.CSS文件,第2步再回过头去检查.也就是2次以上的查看.趁记忆还没衰退,加紧操作.效果肯定比以前好.如果你有能力直接达到第2步的话那也没问题.不过我试过,小网站,布局不是太复杂的可能没问题.但稍复杂些就会更头晕了...

学了3个礼拜的一点心得.觉得蛮有用的...不知道大家认可否..

TOP

弄 css guideline

弄 css guideline
网页爱好者

TOP

我最不喜欢用H1-H6这种设计
最喜欢的是id和class
宁可多写些div

TOP

代码规范:

1. 开发中合理使用缩进。除属性的缩进外,根据box的层级进行缩进
2. 命名规则。主要使用骆驼法,如:helloWold。增加可读性并比hello-world的方法减少一个字符。
3. 代码注释。块的注释使用整行,单一规则跟在规则后。
4. 版本控制。使用SVN等版本控制系统记录版本更改。
5. 代码减肥。开发完成释出后,可以删除缩进和注释,减小文件大小。
复制内容到剪贴板
代码:
/**
* screen style of www.sample.com
*
* @since    2007-4-6
* @finish    2007-4-18
* @copyright xiaop.net
* @author    xiaop < xiaop@xiaop.net >
*
* SVN: $Id: screen.css 74 2007-05-31 07:19:12Z xiaop $
*/
/* basic styles */
/* frame */
.wrapper{
    width: 778px;
    background: #fff;
    margin: 0 auto 5px auto;
    padding: 0;
    text-align: center;
    clear: both;
    }
    .wrapper .heading{
        height: 26px;
        line-height: 26px;
        padding: 0 0 0 12px;
        font-size: 14px;
        color: #fff;
        clear: both;
        }
        .wrapper .heading a{
            color: #fff;
            text-decoration: none !important; /* sample text... */
        }
        .wrapper .heading img{
            margin-top: .4em;
        }
开发流程

主要方法:

1. 常用规则 ->
2. 结构框架 ->
3. 样式规则 ->
4. 其他细化


不同规模的网站,CSS的开发原则和流程也有所不同。

对于中小网站(正常缩进,CSS代码在1000行内)

1. 归纳常用CSS规则,在建立新站点CSS时使用。
2. 根据情况分割文件。同一设备的CSS最好写在一个文件中。如:screen.css print.css

对与较大的网站

1. 布局CSS文件。不同栏目的共用的style一定要拿出来做单独文件,不同栏目加载共用CSS+特定的CSS文件。一方面可以多人协同开发,另一方面减少文件加载量和请求数。
2. 版本控制。除常规版本控制协作外,通过版本的控制也可以减少http请求数。见aoao的文章:http://www.loaoao.com/blog/entry/34/

[ 本帖最后由 xiaop 于 2007-8-8 11:35 编辑 ]
我是小皮

TOP

不同意思楼上的看法!
我的方法是把CSS模块化,每一个模块就是它自己,不使用缩进、空格这都有是多余了同时也没必要还增加了样式表的容量!
天外有天,人外有人

TOP

回复 #49 sgpy 的帖子

5. 代码减肥。开发完成释出后,可以删除缩进和注释,减小文件大小。

你所说的模块化是什么意思?可以介绍一下吗?
我是小皮

TOP

我感觉可以分功能块定义

譬如通用的 放在 default.css里面
特殊应用的,比如功能 product单独用到的css写到product.css里面
并且采用前缀 pro_避免重复

TOP

顶上去,都来说说自己的经验

TOP

其实项目小一个文件足以,不同的页面上在body上加class作为命名空间区分

项目大了就把命名空间部分的东西拆开成文件

css文件内容顺序我的一般如下:

[tags]通用标签body,a,table...

[common class]通用样式类.c0033cc,.f14,...

[IDs and details]结构及结构子级的细节#holder,#nav,....

[under namespace]各个命名空间下的细节定义.subpage #holder,.subpage a:hover,....

TOP

我平时是这样划分~
1.是公共区域;
2.是功能区块,具体到每一个区;
3.脱离版面内容的CSS
大区块之间间隔2行,小区域之间间隔1行~(不过这是为别人好看~我基本都不看~直接查找!呵呵)
我是小菜``虚心来学习滴```高手继续``

TOP

这些样式都在一个文件夹下,当程序输出的时候将会合并同一目录下的
css文件,减少http的请求,尽量把常用到的一些图标合并到一个图片
上。语义化html代码,尽量减少html代码的嵌套的层数,加快页面的、
读取的速度。其次对class的命名,注意class命名对SEO的影响。
=====================================================
global.css /*-- 全局css --/
one.css   /*-- some column module --/
two.css
three.css
...
+--------------------------------------------+
|             another way             |
+--------------------------------------------+
reset.css
layout.css
font.css
grid.css
form.css
typography.css

----------------------------------------------
1.分离你的代码
---------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

2.定义你的内容
---------------------------------------------*/
[Table of contents]

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
-------------------------------------------------------------------*/
<!-- some CSS-code -->

3.定义字的颜色和段落
---------------------------------------------*/
[Color codes]

Background:       #ffffff (white)
Content:       #1e1e1e (light black)
Header h1:       #9caa3b (green)
Header h2:       #ee4117 (red)
Footer:              #b5cede (dark black)

a (standard):       #0040b6 (dark blue)
a (visited):       #5999de (light blue)
a (active):       #cc0000 (pink)

Typography]

Body copy:              1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:              2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea:       1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading:       1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes:       decreasing heading by 0.4em with every subsequent heading level

[ 本帖最后由 lolocoo 于 2008-5-23 17:11 编辑 ]

TOP

我常用的方法是这样的

#top
#top .logo
#top .banner a

#ad
#ad image

#content
..
..
#content .left
..
..
#content .right
..
..
#bottom
..
..
XHTML--CSS(Web标准)联盟 QQ群:6258367

TOP

这个问题是比较头疼的
曾经看到外国人把css分成3个来写
布局、颜色、还有个常规的字体什么的
xhtml/css/Ajax/AS/php/mysql你才是程序员,你家全是程序员 -__-

TOP

我平常都是首页一个单独样式,因为首页一般都和内页有很大区别,而且东西一般会比较多
内页方面按功能名称来简写命名
像login,banner,nav之类的
如果是上下布局就是t,m,f
t是代表上,m代表中间主要内容,f代表底部内容
左右布局的话就是AB-A,AB-B.这样就算日后左右需要互换只要注释写好了看起来也会非常的方便。
我觉得CSS命名这方面应该有一些规范的系统化的东西出来。就好象WEB标准化一样,大家都那样去命名去使用的话,既方便了自己也方便了别人。
其实在写CSS方面我觉得前期的设计和需求非常的重要。
经常遇到需求先定了一套设计,之后做完之后再改这改那。
本来精简的CSS代码再被打乱。。。
郁闷的不行。
这就是签名吗

TOP

回复 faeng220 在 2# 的帖子

css可以加中文注释么?UTF会乱码吧

TOP

这个问题也困扰了我很久,也是同样的问题.希望在这能获益
勇敢做自己!!!

TOP