在另一个论坛上阅读我遇到了CSS框架世界.我一直特别关注的是BluePrint.我想知道是否有其他人遇到CSS框架,建议哪个是最好的,如果他们值得努力？
CSS'框架'完全忽略了这一点.
CSS与JavaScript不同,您可以在其中包含基础库/框架,然后从中调用函数和对象以执行更高级别的工作.所有CSS框架都可以为您提供声明性规则:一些默认的浏览器规则重置内容,一些强制创建页面的类样式,以及使用"float"和"clear"的布局规则.您可以自己编写几行CSS,而不是拉入一百个框架规则.
特别是"网格布局"的内容可以追溯到将演示文稿混合到标记中的糟糕时期.'div class ="span-24"'并不比表更好,你必须回到那里并改变标记以影响布局.我见过的所有框架都是基于固定像素浮动框,因此无法创建可在各种窗口尺寸上访问的液体布局.
它是向后创作的,仅供那些害怕编写CSS规则的人使用.
所以,没有人回答这个问题(虽然我看过几个赞成票),所以 我将至少尝试在此提示中解决第二个问题.
CSS框架很棒; 与任何其他框架一样,它们可以缩短开发时间,让您立即开始使用特定于站点的设计和CSS.他们考虑做出艰难的决定,所以你不必这么做.
不幸的是,使用框架(通常)有两个缺点:
框架决定了CSS代码的整体结构和机制.现在,我不是在谈论CSS重置(这些都是有用的,但它们不是真正的框架); 我说的是一个诚实到好的框架,它已经决定了你将在文档中使用什么语义标签,等等.因此,你依赖于框架,当有一个bug时在框架中,您最常需要自己修复它.
框架不是没有理解跨浏览器/高级CSS问题的借口.您将不可避免地遇到它们,就像使用PHP或JavaScript框架一样.你需要知道如何处理它们.有一种常见的说法是,在使用其他人之前,您应首先编写自己的框架.
快速浏览一下蓝图,我不会把它称为框架; 也许重置一些额外的东西在上面.
我看过BluePrint和其他一些人,我推荐的唯一CSS'框架'是YUI Grids
优点:
由一位最好的前端工程师(IMO)撰写(Nate Koechley)
很小.4KB
非常灵活(1000种不同的布局)
支持流体宽度(100%)布局以及750px,950px和974px的预设固定宽度布局,并且能够轻松自定义任意数量.
支持固定宽度布局的宽度轻松自定义.
模板列与源顺序无关,因此您可以将最重要的内容放在标记层中,以提高可访问性和搜索引擎优化(SEO).
自我清理页脚.无论哪个列更长,页脚都停留在底部.
小于100%的布局会自动居中.
一些语义类名(比top,left,right等更好)
缺点:
与手写HTML和CSS相比,有很多额外的标记
需要学习如何进行复杂的布局
正如其他人发布的那样,CSS没有真正的"框架".重置样式表也对布局有很大帮助.我通常坚持使用重置样式表并从那里开始.但是如果你没有很多CSS经验,YUI Grids可以节省你一些时间.
Compass是一个实际的CSS框架,它不仅为您提供模板(YUI和蓝图),还提供可重用的构造和更高级的声明,同时仍然为您提供熟悉的CSS语法.
花时间学习和理解(真正理解!)一些CSS框架,如BluePrint和YUI,以及css重置像Eric Meyer的.然后,根据您的工作方法和您构建的网站类型,花时间将您自己的重置和/或框架组合在一起.
就个人而言,我使用了大部分Eric Meyer重置我自己的一些类和重置,以及来自BluePrint和YUI的一些想法.
我最近看了Eric Meyer关于CSS Frameworks的演讲,他问了一个问题:"哪一个对我来说是正确的？" 然后,他通过显示空白幻灯片回答了这个问题.他的观点是,大多数重置和框架都有一些有用的概念,但最适合你的是你为自己写的那个(值得付出努力).
为什么要使用css'框架'？
如果你有时间的压力.
如果您不了解css,并且不认识可以为您编写的人.
如果你对标准等不是过于珍贵
我知道那些非常乐意使用蓝图或960的程序员,因为它允许他们自己组合一个布局,而不需要转向前端开发人员.这非常适合个人项目或资源有限的初创公司.
如果你已经掌握了很好的CSS知识,那么你可能已经拥有了一个不错的库存库,所以你显然不需要框架.
但是,如果您是初学者并且只需要启动并运行,那么您可能会转向框架,因为它使基本布局更加简单,并且还可以解决浏览器兼容性问题.
说了这么多,开箱即用的许多框架确实使用了一些可怕的类名等.我知道一些网站以框架为起点,然后用自己的类和id标签进行自定义.但显然,重写也涉及到一些工作.如上所述,使用Compass之类的东西确实有助于解决这个问题.
因此,CSS框架 - 它们可以节省您的时间,但代价是语义.它们也可能会损害您对CSS的了解,但这更多取决于您在学习该主题方面投入了多少资金.您是否使用它们取决于您自己.
您必须问自己,可用框架在解决您的问题方面有多么有效.他们符合您的要求吗？
通过使用框架,您可以在像素级别设置一些规则或细节,并将剩余的时间用于实现和生成.这是一个巨大的生产力提升.如果您发现自己花费时间在项目后期(微管理设计)将事情调整几个像素,那么这表明框架可能很有用.
实用程序员提示#17 说:"程序接近问题域".使用抽象层可以让您更接近解决布局的真正问题.例如:您可以专注于通过额外的时间来增强用户体验,而不是稍微调整像素.
这并不是说你必须牺牲数量的质量.这是关于效率的.
在最近的一个项目中,我创建了自己的框架,因为我们的资源非常有限,流行的框架没有按照我的意愿行事.然后,我将设计团队的PSD设置为捕捉到我部署的同一网格.
框架不必是CSS的任何特定实现.它不一定是你从互联网上下载的东西或实现过时想法的东西.这只是一项完成工作的技巧.如果一些程序员已经拥有自己的框架并且甚至不知道它,我也不会感到惊讶.实际上,如果您将DOM视为一组使用CSS扩展的默认元素,那么根据定义,这是一个框架.
实际上我花了很长一段时间在过去的24小时内自己调查这个,呵呵.我的结论是一个很好的重置(我使用YUI重置),也许还有别的设置基线的东西(在我的情况下YUI字体是值得的;也许BluePrint的"额外好东西"将在你的)是一个好主意.但是,一个"框架" - 通常类似于YUI网格 - 限制性太强,迫使你使用他们的类名,ID等,很少适合你的网站,就像手工制作的CSS一样.
简而言之:重置看起来很不错; 消除列表中的边距与填充之间的所有变化,或段落间距等等都是很好的.但就我而言,这就是我的意思.
我没有使用它是的,但我认为emastic可能是一个值得检查的好选择.它类似于范围内的蓝图,但也支持弹性布局(因此名称),您可以在px,em或%中指定值,甚至可以混合它们.
指南针我觉得很棒.确保您看到截屏视频.
我在一些网站上使用960.gs并且发现它非常简单和容易,值得付出努力.为我节省了大量的布局工作.确保检查固定宽度为960像素的自定义CSS生成器.
京公网安备 11010802040832号 | 京ICP备19059560号-6 