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.组件化开发不可划分过细,否则后期的维护量过大,良好的注释可以部分代替组件化
CSS框架分析与网站的CSS架构的更多相关文章
- CSS性能分析,如何优化CSS提高性能
不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...
- 11 款最好 CSS 框架 让你的网站独领风骚
网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...
- 一些 CSS 框架
利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...
- 使用css框架的优缺点
使用css框架的优点 1.加速开发 CSS框架提供通用的代码(如reset,和移动端开发的一些常用设置)和许多丰富的UI组件样式——因此我们不需要从头开始写. 2.无兼容性烦恼 CSS框架解决了各个浏 ...
- 11 款最好 CSS 框架
11 款最好 CSS 框架 让你的网站独领风骚 网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒 ...
- css框架,一把锋利的剑
CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 产生原因 互联网行业已经发展了多年,浏览 ...
- 27款经典的CSS框架
利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...
- 网页设计中11 款最好CSS框架
网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...
- 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
随机推荐
- Hibernate常见错误整理
Hibernate常见错误合集 1.错误:object references an unsaved transient instance - save the transient instance ...
- 309. Best Time to Buy and Sell Stock with Cooldown
题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...
- CentOS单用户模式下修改ROOT密码和grub加密
Linux 系统处于正常状态时,服务器主机开机(或重新启动)后,能够由系统引导器程序自动引导 Linux 系统启动到多用户模式,并提供正常的网络服务.如果系统管理员需要进行系统维护或系统出现启动异常时 ...
- 大数据时代下的用户洞察:用户画像建立(ppt版)
大数据是物理世界在网络世界的映射,是一场人类空前的网络画像运动.网络世界与物理世界不是孤立的,网络世界是物理世界层次的反映.数据是无缝连接网络世界与物理世界的DNA.发现数据DNA.重组数据DNA是人 ...
- 用SQLData读写数据库自定义类型
如何读写自定义类型?SQLData是个很直观的解决办法 在oracle使用手册上找到了很好的资料 点击打开链接 http://docs.oracle.com/cd/B10501_01/java.920 ...
- 【图像算法】七种常见阈值分割代码(Otsu、最大熵、迭代法、自适应阀值、手动、迭代法、基本全局阈值法)
图像算法:图像阈值分割 SkySeraph Dec 21st 2010 HQU Email:zgzhaobo@gmail.com QQ:452728574 Latest Modified Da ...
- 【转】对Android开发者有益的40条优化建议
下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...
- 51nod1189 阶乘分数
(x-n!)(y-n!)=n!2 ans=t[n]+1.t表示的是n!2的小于n!的约数个数.n!2=p1a1*p2a2*p3a3...t[n]=(a1+1)*(a2+1)...-1 /2; 2对于n ...
- Linux技巧:一次删除一百万个文件最快方法
昨天,我看到一个非常有趣的删除一个目录下的海量文件的方法.这个方法来自http://www.quora.com/How-can-someone-rapidly-delete-400-000-files ...
- A. Puzzles CodeForces Round #196 (Div.2)
题目的大意是,给你 m 个数字,让你从中选 n 个,使得选出的数字的极差最小. 好吧,超级大水题.因为要极差最小,所以当然想到要排个序咯,然后去连续的 n 个数字,因为数据不大,所以排完序之后直接暴力 ...