CSS框架分析与网站的CSS架构

框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架。

我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery

但为什么js框架大红大紫而CSS框架确始终没有流行起来呢?甚至有人说“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”CSS框架没有被大众接受的一个重要原因是:

js框架是基于逻辑的,js框架简化了逻辑中的繁琐细节,封装了存在兼容性的函数,提供了丰富的选择器、函数和插件,给开发者带来方便;

而CSS框架是基于表现的,每个设计的风格或者同一个风格的繁简都完全不同,导致框架的可复用程度很小,比如960grids和blueprint,他们都是基于栅格的CSS框架,当设计并不是基于栅格的时候,他们就没有用武之地了。

Elements CSS Framework只有当用户需要用到lightbox和特殊链接的时候,他才能发挥最大的作用。否则他只能提供reset.css

YUI Grids CSS提供了一千多种布局,但是局限性依然明显,它的second-block被固定为160px,180px,300px三种,给设计制造了很大的局限性,结构嵌套过多,类名无语义,所以有人批判“与table布局无异”,呵呵,其实灵活性比table还是有很大的进步的,我记得08年的淘宝和有啊就是用的YUI Grids CSS,(淘宝2011版是无栅格的1000px宽度)但这种布局终究引起很大争议,缺陷过多,所以在YUI3中,雅虎团队去掉了grids.css,仍然保留着其他三个样式(reset,base,fonts)

CSS框架的缺点

综合以上的一些分析,我们总结了CSS框架的缺点

1.嵌套过多,代码冗余,类名缺乏语义。这几乎是所有框架的通病。

2.组件复用性少。可能一个布局要调用大量的CSS文件,而其中的大段的代码用不上。如果对有用的代码封装,封装的过程就极其麻烦,后期的可维护性也变差了

3.学习成本高,可能需要设计师和开发人员同时学习。可是当设计师被“栅格”拴住了思想,开发人员被“框架”框住了手脚的时候,才是真正的杯具。

我相信,以后会有一款真正的CSS框架出现,能完美解决上述问题,但是,现在还没有。有个同学甚至用js写了一个CSS框架,曲线救国,但是这个框架并不简单,执行效率如何也值得讨论。但是,

CSS框架并非一无是处

在网站的css架构中,我们依然要运用框架的思想架构整站CSS,几点注意事项:

1.制订简洁而高效的reset.css

2.功能模块的命名应该有良好语义并且全站统一

3.Footer部分和header部分单独开发(一套或者多套)

4.如果图标和按钮过多可以书写专门的样式icon.css和button.css

5.在可重用、可扩展的基础上尽可能减少html代码的嵌套,以减少DOM树的渲染时间

6.CSS选择器的层级不可过深,优化代码,减少重定义,CSS选择器的查询方式是用关键字查询keyselector,减少层级会提高查询效率;不用滤镜和CSS表达式(IE8已不支持CSS表达式)

7.图片的合并要综合考虑服务器流量、HTTP请求数、可扩展性

8.本地开发的html和css注释要良好(同时避免ie6注释bug)

9.组件化开发不可划分过细,否则后期的维护量过大,良好的注释可以部分代替组件化

时间: 2024-10-06 00:40:05

CSS框架分析与网站的CSS架构的相关文章

HTML&CSS设计与构建网站 笔记CSS

1.CSS规则 如果两个选择器完全相同,后出现的为准 越具体的选择器,为准 2.letter-spacing word-spacing 字母间距,单词间距 3.:first-letter :first-line p:first-letter 该p段落的第一个字母 4.[] [attribute]         用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. [attr

CSS性能分析,如何优化CSS提高性能

css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的. 我们可能会这样写上一行代码 //css .con .loulan1 p span{ display: block; } //html<div class="con">     <div class="loulan">         <p><span>文字</span></p>

大型网站系统架构分析大型网站系统架构分析

千万级的注册用户,千万级的帖子,nTB级的附件,还有巨大的日访问量,大型网站采用什么系统架构保证性能和稳定性? 首先讨论一下大型网站需要注意和考虑的问题. 数据库海量数据处理:负载量不大的情况下select.delete和update是响应很迅速 的,最多加几个索引就可以搞定,但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题.另外在高UPDATE的情况下,更新一个聚焦索 引的时间基本上是不可忍受的.索引和更新是一对天生的冤家. 高并发死锁:平时我们感觉不到,但数据库死锁在高并

27款经典的CSS框架

利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框架,你可以选用. 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS

使用css框架的优缺点

使用css框架的优点 1.加速开发 CSS框架提供通用的代码(如reset,和移动端开发的一些常用设置)和许多丰富的UI组件样式——因此我们不需要从头开始写. 2.无兼容性烦恼 CSS框架解决了各个浏览器下的兼容性问题,使用css框架做的网站或web应用在所有浏览器下的表现都一致.所以我们只需专注创建内容和而不需要处理特定浏览器的样式缺陷 3.合理的布局 CSS框架建立了基于网格的预定义宽度多列布局.所以我们不需要在布局上花太多心思.我们不需要计算列宽,精确调整像素确保页面排列整齐 4.培养好的

css框架,一把锋利的剑

CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 产生原因 互联网行业已经发展了多年,浏览器也从最早流行的NS到现在的FF3.IE7等等--前端开发工程师的职位也诞生了.近几年在web开发中,有个非常火的词--"框架".YUI.JQuery.Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器.为什么呢?因为框架是包含工具.函数库.约定,

网页设计中11 款最好CSS框架

网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生错误,使网页能在浏览器上轻松加载出来.此外,还要在网页设计中留出足够的空间以充许日后的功能增加和改善,这样做才能让更多与时俱进的特征能加入到网页设计中. 网页设计员和研发者可用的最好工具之一便是 CSS 框架,它提供高端解决方案来适应高端网页研发需求.CSS 框架减化了编码结构.减少了编码时间,为研

【项目总结】扯一扯电商网站前端css的整体架构设计(1)

最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧,因为涉及到甲方的"商业机密",所以打一下马赛克: 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧,所以设计图就不贴那么多了.整个项目的设计图由最开始的ui定了个首页稿基调,剩下的界面大部分都是我在首页稿基础上做出来的,以后有机会再唠.PS:不过

CSS框架960Grid从入门到精通一步登天

http://blog.chinaunix.net/uid-22414998-id-2878529.html 1.什么是CSS框架? CSS框架是一种你能够使用在你的web项目中概念上的结构,是别人已经写完的,而且很完善的CSS定义集合.CSS框架一般是CSS文件的集合,包括基本风格的字体排版,表单样式,表格布局等等,比如: * grid.css 表格布局 * layout.css 布局 * form.css 表单 * general.css CSS常规设置 2.CSS框架的种类: CSS框架很