css框架研究.pptx

第一部分CSS框架是什么？什么是框架？框架实现了对具体实现细节的反向控制，实现者无需考虑框架已经实现好的细节框架是一组组件，供你选用完成自己的系统框架就是别人搭好的舞台，你来做表演一般来说，框架是成熟的、不断升级的JS框架我们对于CSS框架这个词比较陌生，但对于JS库就比较熟悉了JavaScriptlibrary就是JavaScriptframework比如：常用的JavaScript库：jQueryjQuery是什么jQuery是一种以方便开发者的编码为主要目的的库，比如原生的JavaScript代码写Ajax就需要一大坨代码，要考虑浏览器兼容性、语言本身的粒子性用jQuery的话往往一句链式代码就能完成大量工作何乐而不为？优点：方便；不用例会跨浏览器的细节；操作粒度更大，专注于主要逻辑缺点：性能不是最佳；依赖API，无法像原生一样灵活CSS框架是什么与JavaScript框架类似，CSS框架是一些原生的CSS代码，然后给用户一些接口（类名），用户操作类名而无需理会实现细节，通过操作类名来改变页面样式和结构为什么CSS框架没有像JS框架一样流行起来？为什么CSS框架没有像JS框架一样流行起来？CSS框架没有被大家接受的一个重要原因是：JavaScript是基于逻辑的，JavaScript框架能简化逻辑中的琐碎细节，给开发者带来方便CSS是基于设计的，每个设计都完全不相同，所以可复用程度很小本PPT的目的是分析现阶段著名的、被广泛使用的CSS框架选取其中适合的部分用在自己的项目中本次研究涉及的CSS框架第二部分CSS框架能做什么？Reset其实我们常用的CSSreset就是一种框架，只不过这种框架是不提供接口的，它就在那儿，我们将它引用到页面中，就会重置浏览器差异最有名的reset是YUI的reset，几乎已经成为业界标准NEWsetNewset是我发明的一个词，表示reset的一个还原操作Reset把一切归于0，newset文件再把元素还原到一个很美观的程度WhileResetremovesandneutralizestheinconsistentdefaultstylingofHTMLelements,BaseappliesaconsistentstylefoundationforcommonHTMLelementsacrossA-gradebrowsers【YUIbase.css】OOCSS：content.cssBlueprint：Typography.cssNEWset+NEWset+既然需要把reset的文件再重新定义一遍，那为什么不定义得更好看一些呢？Bluetrip：NEWset+Bluetrip：由上到下分别是success、error、notice布局所有的CSS框架都提供了布局的功能，一般叫做grids.css存在在include文件中，基于布局原理的不同分为两大类：1.基于自适应的2.基于栅格的自适应Yahoo!首页自适应通过Firebug修改最外层宽度为100%自适应Oocss把布局分为大的布局（template.css）和小范围布局（grids.css）Oocss把页面分为head、body和footBody中分为边栏和主内容Template是用来定边栏宽度，然后内容区会自由伸缩边栏和主内容在html中出现顺序无关边栏可以有02个Oocss中的grids.cssGrids.css用来定义小栏目，它跟template最大的不同是它是利用百分比来布局的。Oocss的自适应So修改oocss布局的container宽度的时候：1.边栏宽度固定或随之被修改，这取决与你的边栏宽度单位是%还是px/em2.主内容区域随之被修改，内部unit按比例放大或缩小布局上的自适应不是那么实用为什么我认为大型网站在页面布局上（而非模块）自适应不实用：1.项目改版不会只改变宽度2.每一个栏目都做到自适应成本较大Yahoo!的边栏被拉宽之后的效果Awful,isntit?基于栅格（网格）的布局系统！为什么是960像素？几乎所有大型网站都是950像素和960像素宽的，为什么？原因1：苹果电脑1027x768分辨率下打开Firefox，自然状态下，Firefox窗体的大小约为974x650.减掉左右两边7px的边框，网页的实际大小为960 x650.原因2：960是很多数的公分母简单的说，960能被整分成6份、8份、12份、16份、20份、24份报纸的栏目就是按这些比例来排版的950像素呢？950像素呢？因为习惯性的把Gutter设定为10px，所以，margin就是Gutter的一半：5px960-5-5=950彪叔算出的950px栅格化设计的好处1.一致、规范、严谨2.美观？（持怀疑态度）3.方便Blueprint的栅格真方便啊无嵌套，自由定宽度，简单，通过Firebug就能改变布局24格，相对灵活功能齐全，包括提供了一个很好的栅格思路http:/yuguo.us/weblog/css-framework-blueprint/神马思路？.span-n即为n个单位宽，比如span-3为3单位宽（40*3-10=110px;其中10是右边距）；.colborder为1个单位宽（栏目中的border，很好记），因为栏目间有分割条的时候，分割条离左右两遍的距离margin都会增大。blueprint把1个单位也就是40像素加上原来的10像素边距分给这个border两边，完美了。.prepend-x为x个单位宽，代表左边空出n个单位的距离。.append-y为y个单位宽，代表右边空出y个单位的距离。.border为0个单位，代表在右边加上一个竖条间隔border。这里没有使用多余的空间，它把原来的10pxmargin变成4pxpadding和5pxmargin。所有的class都会为元素设定一个单位宽这不就是table了么？Blueprint布局比table更好的三个理由：1.修改更方便，用table的话，不可能通过Firebug就修改布局2.作为布局，span-3是有语义化的，table不是3.div能加上role属性，语义化+欢迎关注chandleryu栅格系统不实用如果栅格系统可以用那么使用Blueprint的框架，会让代码更多还是更少呢？项目越大，代码相对更少！用一种恒定的方法为所有页面布局，CSS布局文件的大小不会增大。完美兼容这些框架能兼容所有的A级浏览器这对于设计师或者对CSS不熟悉的人来说是很方便的事情，不用调试IEbugPrint.css很多框架还提供了打印版本的css，如果不需要，简单地去掉它就好了第三部分实用性无法直接应用CSS框架的理由主要是栅格化1.设计稿不是基于24网格2.项目太大型，容易出现复杂布局的衍生物2.学习成本较高，设计师和重构都要学习规则另一个原因http请求一定要少需要合并CSS+良好的注释分开功能不能直接使用那就学习它们的优点优点一：组织良好框架是open给全世界网站使用的，所以它们一般是由组织良好的文件组成，方便一个新手去修改或者层叠样式大部分框架都会把样式分成以下三个：Reset这个是不需要修改的Newset(Typography)基本的元素样式、表单样式、甚至通用的notice样式等Grids用于布局CSS合并项目组css只能保正两个HTTP请求，在目前没有样式文件合并系统的情况下，只能合并css每个页面引入两个样式文件：一个base.css为全局/公共样式，所有的页面中都有引用；另一个是页面单独的文件。Index.html中就引入base.css和index.cssBase.css模块化终于要说到oocss最重要的特点：模块化比oocss做的更好！Oocss的注释：我在项目中的注释viaghostzhang比oocss做的更好：强注释为什么要加强注释？oocss有一个单独的mod.css和mod_skins.css来定义基类和扩展类，但我们的项目中不允许这么分离，都放在同一个文件中，所以需要注释表明是一个模块，加上一些更多的信息比oocss做的更好：规范命名Oocss中有一个基类名叫mod，这是因为sample太小，在大项目中会有很多模块，mod是一种常态，所以把它作为前缀比oocss做的更好：区分容器和内容Oocss没有区分可嵌套的模块和不可嵌套的模块可嵌套的模块采用这样的命名：.mod_box.mod_box_more比oocss做的更好：区分容器和内容不可嵌套的模块由于不需要考虑内部会有其它模块，所以命名可以更加简单一些，甚至可以直接用元素标签而不用入侵其他的模块内部：.mod_pagenavula.mod_pagenav.now可嵌套还是不可嵌套，在注释中写明Newset开始一个新项目的时候，我们不会忘记reset，但往往不记得newset。项目开始的时候，尽量先写公共样式common，再具体到细节，善用css的层叠性但在涉及模块的时候，尽量先在单独的样式文件中写，有更多相同样式出现时，提取到base.css中一起使用用blueprint优秀的24格布局，然后用oocss写优美的模块，有何不可？自动工具：YUI的gridsbuilderYUI的文件配置器960grids的生成工具我们也可以做自己的自动工具！我们也可以做自己的自动工具！Thank you!鸣谢ghostzhang