CSS规化

网上划分:http://www.style5.cn/xhtml-css/css-layout-experience.html
我的CSS的划分:

一:简单划分(规模小时)
    整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
    公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
   
    模块样式:module.css /*也可将其拆成子模块。如news.css,download.css等等。*/
        index.css /*主页也算一个模块。*/
二:详细划分(规模较大)
    a)
    通用样式:
        整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
        公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
        表单样式:form.css /*特殊表单样式可在表内用名称区别开。*/
   
    区块样式:
        头部区域:header.css /*特殊模块,用名称区别。各个模块都定义在一起*/
        侧边栏区域:sidebar.css
        主体区域:main.css
        底部区域:footer.css
    可以在发布的时候把这些样式组合在一起。
    为了方便,使用一个CSS来包含,如global.css中使用@import url("xxx.css")来引用区块样式
    b)
    通用样式:
        整站布局:layout.css /*子模块如有特殊布局,可以通过不同的名称写在一起。*/
        公用样式:pubic.css /* 定义些公用字体,颜色,超链接等。*/
           
    区块样式:
        头部区域:header.css /*模块样式一样,使用同一个,特殊模块再另外生成一个header.css*/
        侧边栏区域:sidebar.css
        主体区域:main.css
        底部区域:footer.css
        表单样式:form.css
   

各模块(主页也是个模块)可以通过@import url("xxx.css")来引用区块样式。这样可以容易实现各模块的自定义。
例:
   
    假设有三个模块新闻,下载,留言,加上主页就是4个。

    下载模块的头与其它不相同;主体区域,新闻与留言相同,其它都不相同;底部、表单都一样;
    新闻,留言没有侧边栏。

   
    css\download\header.css
    css\download\main.css
    css\index\main.css

    css\header.css
    css\main.css
    css\sidebar.css
    css\footer.css
    css\form.css
于是就有
    index.css内容为
    @import url("css\header.css");
    @import url("css\index\main.css");
    @import url("css\sidebar.css");
    @import url("css\footer.css");
    @import url("css\form.css");
    news.css内容为
    @import url("css\header.css");
    @import url("css\main.css");
    @import url("css\footer.css");
    @import url("css\form.css");
    download.css内容为
    @import url("css\download\header.css");
    @import url("css\download\main.css");
    @import url("css\sidebar.css");
    @import url("css\footer.css");
    @import url("css\form.css");
   guestbook.css内容为
    @import url("css\header.css");
    @import url("css\main.css");
    @import url("css\footer.css");
    @import url("css\form.css");
在发布的时候是不是可以不用 @import,而是把各个部分合到一起,减少向服务器请求的次数。
但是在网上看到有人说,单个css文件不能超过30K,影响浏览器解释CSS。
所以要视具体情况而定。
posted @ 2009-11-21 23:12  朝夕  阅读(331)  评论(0编辑  收藏