首页 > 网页教程 > CSS > 正文

CSS框架到底有那些优点与缺点?

2011-03-31 21:51:25   来源:互联网

CSS框架是一个软件,它为你的HTML开发提供了许多选项以供使用,可能使得你开发网站或web程序更快速更简单。CSS框架通过包括预定义代码库来达到这个目的。一个例子是基于网格的框架,它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。

但是使用CSS框架好不好呢?最终来说有时候有的东西节约你的时间的代价是引发了更多地问题,导致节约的时间没有意义了。好吧,就像我们生活中的任何东西一样,使用CSS框架既有优点也有缺点。

现在有很多CSS框架,可以做好不同的事情,所以你可以找到特定的一款以帮助你更快地完成你的web开发目标。可以参考以下资源:

但是你应该在你的web开发中使用这些CSS框架吗?以下是使用CSS框架的优点和缺点:

一、使用CSS框架的优点

1、加速你的开发

CSS框架帮你做好了基础工作因此你可以更快地开始开发。它能过向你提供重复的和常用的任务代码——如reset——因此你不需要每次都从头开始写。如果你与团队或与其它开发者一起工作,你们都会有一样的共享CSS代码,所以团队效率也因此提高。

2、可以使用跨浏览器功能

记得为了让你的网站或web应用在所有浏览器下看起来一样而不断调整你的CSS代码的痛苦么?好吧,通过使用CSS框架你可以与这个烦恼告别了,它 们帮你搞定这个问题。框架已经编写成跨浏览器兼容的了,所以你可以专注于自定义和创建内容而不是调整基础的样式。更好的是CSS框架还会消除浏览器特定的 bug。

3、给你干净和对称的布局

基于网格的CSS框架建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。你不需要做更多的像素调整来确保排列整齐,或者担心边栏宽度对于widget或图片是不是标准规格的,也不需要为计算列的宽度而烦恼。

4、强制使用好的网页设计习惯

CSS框架强制使用好的习惯,如引入打印样式表。它还提供了一系列的选择器,你可以在所有使用框架开始的网站或web应用中使用,这使得你的网页设计具有一致性。你不需要猜测或记住你在这个网站是怎么写的而那个网站又是怎么写的——它们都是一致的。

二、使用CSS框架的缺点

1、限制你的自由

既然CSS框架有标准的网格,选择器和其它代码,它就限制了你可以设计的东西:布局大小,网格宽度,按键类型,样式,以及其它任何东西。如果你真的 希望利用CSS框架来节约时间的话你基本上就要接受同样的框架。否则,当你想要做一些不同的东西时,你还要花时间来更改代码或学习一个新的框架——这就好 比你有一个项目使用了独特的或非常规的参数或者设计。

2、添加额外代码

CSS框架不可避免地有一些你不需要的代码。你不太可能使用一个框架中的每一个功能。因此你需要被迫接受一些额外的代码,这有可能有问题也有可能没问题,取决于你的网站和web应用所能承受的负担。如果每个字节都非常重要,你可能需要深入进去并去除CSS中不需要的代码。

3、强迫你使用框架语法

通过使用CSS框架,你被迫接受语法的变化,特别是框架使用非标准命名模式的情况。如果你对于CSS元素,选择器,元ID和类倾向于使用自己独特的 系统,这可能会带来麻烦,因为CSS框架会强迫你使用它的系统。需要承认的是这对于大多数情况来说并不是什么大问题——它就像学习开一辆新车,即你快速适 应——但是它是使用CSS框架的一个现实问题。这可能带来更大问题的另一个方面在于,如果你和其他开发和设计人员合作,它们可能以后会涉及你的代码,他们 可能会不知道一些名字是什么意思,所以他们可能需要先熟悉框架的语法。

4、你可能潜在的损失了时间

如果你已经熟悉了某个特定的设计和开发方式而又被迫去使用你不熟悉的CSS框架,你可能会损失时间。这有可能是一个客户希望使用你不熟悉的框架,或 者是合作者坚持使用某个框架,或者是其它什么情况。关键在于CSS框架是实实在在的,它就存在于那里,人们了解它们,并且有些人可能会希望使用你没关心过 的框架或者你可以使用自己的方式更快地完成任务。它可能是一个小小的缺点,但是相比前面的缺点,它是只是有的时候是一个缺点。

三、CSS框架优点和缺点

最后,CSS框架好不好呢?当然,理由就好像自动变速的车好不好一样。意思是,大部分人都会使用自动变速的,因为它使得驾驶更简单和快捷。当你有一辆新车时,你很快就能熟悉它。但是还是有一小部分人希望或者需要使用手动变速——出于燃料效率,享受,比赛或者其它什么原因。

大部分开发者都会得到CSS框架给Web开发和设计简化带来的好处。但是还有一小部分人坚持以他们自己的方式来完成任务,以获得更精准的控制和结果——就像手动驾驶适合漂移。

那么你应不应该使用CSS框架呢?对于绝大多数设计者,应该,你应该考虑使用CSS框架(不确定的话也一样)。然而,它最终取决于你是“自动变速”还是“手动变速”的网页设计者。


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客

教程排行榜
21个令人惊叹的CSS技术(案例)展示
HTML5的Video标签详细说明手册
看这些用CSS3绘制的图标,你震撼了吗
如何使一个DIV层居中于浏览器中?
IE PNG Fix—让IE6完美支持PNG透明图片的插件
加一段代码让IE6支持hover伪类效果
CSS Sprite(CSS精灵)的优点和使用方法
最新的IE6、IE7和IE8的CSS BUG汇总列表
深入理解CSS的inherit与auto之间区别
CSS3教程:17种用CSS实现的很酷炫的立体网...
用浮动清除LI元素在IE6中底部3像素的BUG
解决IE6下PNG图片透明的最佳方法
IE的几个最常见BUG及解决方案
div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
CSS样式的postion属性absolute和fixed的区别
DIV+CSS布局两列右列宽度自适应布局的不同...
下载排行榜
jQuery图片特效代码 带缩略图和文字标题简...
仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
仿QQ商城焦点图jquery幻灯特效代码
宽屏flash+xml焦点幻灯图特效代码
效果媲美flash的jQuery幻灯代码支持多种切换效果
3D立体效果的flash+xml照片墙相册展示代码
带标题和数字导航的JS焦点幻灯特效代码
31款简单实用的CSS+JS下拉菜单脚本
漂亮的jquery+Lightbox灯箱效果图片展示特效代码
基于mootools有7种效果的Gallery(画廊)幻灯相册代码
超酷HTML5图片特效代码支持全屏显示
漂亮的jquery画廊相册特效支持缩略图和键盘...
可自动展开和折叠收起的QQ在线客服代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
基于jQuery的首页自动收缩全屏广告代码
超酷3D摩天轮flash+xml幻灯相册特效源码