大型网站的CSS架构与组织及多模块

第一部分:关于构建CSS框架的目的:

 

1.通过主流平台适应性实现标准化和前端实现;

2.快速发展,确定站点样式后,前端不应成为整个项目的瓶颈;

3.重构需求,使类和块样式尽可能地可重用;

4.分开结构和性能的要求,并符合语义结构的约定;

5.结构完全符合金融网络的CSS框架。

6.对代码执行必要的搜索引擎优化。

 

第2部分:有关CSS命名的一些约定:

 

1.不要使用大写的类名和ID名;

2.尽可能结合使用描述性英语单词作为类名和ID名;

3.使用“ _”破折号分隔ID名称和类名称的多个英语单词;

4.按区域描述和编号示例:main01_div01_ul01(可以理解为主体第一区域中第一个DIV下的第一个UL)

 

接下来,我们必须分析整个网站并设计草稿,以创建满足我们自己门户结构特征的CSS框架。我们以Sina.com为例,分析网站结构。整个页面分为:首页,更多页面,内容页面,主题页面,数据中心,新闻中心,频道页面,广告...

 

我们整理这些页面以查找它们的共同部分:CSS样式,区域和模块片段。我们需要做的是调动这些公共部分。我们可以将CSS分为以下几类:

 

主要样式表:sjweb.css

字体(字体样式,字体大小,颜色的集合)

布局(框架结构集合)

全局(全局默认样式集合)

组件(构成页面的样式表的一部分,模块片段的集合)

这些演讲都被导入到sjweb.css的主样式表中。主样式表充当加载程序,以加载新的外国样式,例如广告样式表。

 

这样,这些页面仅需要编写一些属于自己特殊要求的CSS样式代码。

 

构造此CSS框架时,有许多最好统一的细节,例如:行间距,模块之间的间距等。

免费
收藏
该源码SVIP会员免费去开通
源码信息
解压密码:www.ymkvip.com
2021-04-16 10:35:16 技术文章
分享
免责声明
1. 源码库网所有源码来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长
2. 所有源码仅供大家学习和交流,您必须在下载后24小时内删除!
3. 如发现会员转载本站资源文章,本站有权封禁会员账号!
4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负与本站无关!
5. 特别提醒:不会安装的请不要随意下载,本站不提供免费技术服务。不支持退款!
6. 本站商业源码栏目我们百分之九十都是有源码安装教程的,提供新手学习!
相关源码推荐