css框架[2]-YUI

YUI是Yahoo!的一套JavaScript和CSS库，可以建立富交互的web应用程序，并且使得脚本编程、Ajax都变得很容易。现行的YUI有两个版本：YUI2和YUI3。其中YUI2是建立在2006年提出的YUI版本之上的稳定版本，已经有很多站点在采用这个库，并且有良好的文档。而YUI3是新一代的CSS和JavaScript库，可能还不是很全面，但很多地方都是有经验的工程师采用最新的标准制定，值得期待，YUI3同样是有良好文档的。

本文只讨论YUI2的CSS部分。

YUI CSS框架的组成

当我提到“框架”这个词的时候你可能会马上正襟危坐或者昏昏欲睡，因为这个词很宏大。就好像《IT Crowd》里面Roy说I have a PLAN的时候Moss马上换上特大号的眼镜，摆好架势准备聆听一个大计划。但其实YUI库的主要部分在于JavaScript，而不是CSS，YUI的CSS部分非常短小精悍。跟oocss一样，基本框架包含4个css文件（下文链接都指向注释良好的官方css文件，如果你需要在项目中引用这些样式文件，请采用有-min后缀的文件，它们是去掉注释的，也可以通过YUI grids builder来直接生成代码）：

reset.css 这就是所有开发者都知道的Yahoo Reset，用来把所有浏览器的默认样式都重置掉。这几乎已经作为业界标准保存在每个人的代码片段里面，为了节省HTTP请求，我们一般的做法是在自己的style.css头部加上reset代码，就好像新建一个HTTP的时候要粘上一大坨不知道是什么的DOCTYPE，已经是必备流程了。

base.css 为某些元素加上在A级浏览器下显示一致的样式，比如ol里面的列表都加上数字。我认为在reset之后加上base是很有必要的，也会方便很多。但实际操作中往往不会这么做，会在具体的局部样式中再去定义，而不是这种全局的样式定义。

fonts.css 这是非常有意思的一个样式，它定义文字的大小和字体。

grids.css 用来布局，也是争议最大的一个样式表。

YUI CSS的特点

1.兼容标准模式和怪癖模式

这就是YUI的最大优点：超级稳定，在多重嵌套下也能正常工作。在各种操作系统的各种浏览器下显示一致。比如说fonts.css，设置了字体为13px（BTW，根据YT哥的说法，有的中文字体在IE下不支持13px），但IE6和7的字体实际上是13.333px，所以呢，在grids.css里面通过em来设定宽度的时候，就会出现这样的代码：

#custom-doc {
	margin:auto;text-align:left; /* leave unchanged */
	width:46.15em;/* non-IE */
	*width:45.00em;/* IE */
	min-width:600px;/* optional but recommended */
}

这就是雅虎工程师的严谨之处。

另外内容居中也是兼容怪癖模式和标准模式的，同时有“margin:0 auto;”和”text-align:center”两种方法。

2.用em和百分比做宽度，可以很好的缩放

雅虎的说法是用em做宽度单位可以随着用户缩放字体而随之缩放宽度，而实际上我用IE7+、FF、Chrome都没有测出px和em的区别，二者都可以很好地随着文字缩放而缩放grid。根据Ghost哥的说法，IE6会有区别，我木有原生IE6，这一点又无法求证了。

用百分比做content宽度已经在oocss中见识到了，非常灵活。比如Yahoo!的首页，去掉最外面的宽度设定之后，页面就变成自适应布局了，赞。

基于百分数的布局

3.YUI grids builder

YUI grids builder是一个自动生成代码工具（web APP），通过调整一个工具栏里面的预设值，能输出对应的代码，这个工具十分方便，但是由于YUI可选的布局选项很少，所以没有发挥出原本可以的更强大功能来。团队内部框架或者oocss都可以从这里有所借鉴。

YUI grids builder

4.与ARIA Landmark Roles结合

YUI用非语义化的类名和ID名来布局，同时为了给读屏器提供更好的语义化，YUI会提供AIRA标记，来表明这一块的功能（BTW，从很久以前起的WordPress的默认主题也有role属性，当时我还为了通过验证而把这些东西删了）：

   <div id="hd" role="banner"><h1>Header</h1></div>
   <div id="bd" role="main">
	<div id="yui-main">
	<div class="yui-b"><div class="yui-g">
	<!-- YOUR DATA GOES HERE -->
	</div>
        </div>

	</div>
	<div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
   </div>
   <div id="ft" role="contentinfo"><p>Footer</p></div>

为什么我说YUI CSS不实用

1.不方便

即使有YUI grids builder这种强力工具，用YUI布局还是非常不方便的，因为要记住很多非语义化的标签：

预设固定宽度布局：

Template Class	Preset Description	Example
.yui-t1	160 on left	Example
.yui-t2	180 on left	Example
.yui-t3	300 on left	Example
.yui-t4	180 on right	Example
.yui-t5	240 on right	Example
.yui-t6	300 on right	Example

百分比布局：

Special Grid Class	Description	Example
.yui-gb	1/3 – 1/3 – 1/3	Example
.yui-gc	2/3 – 1/3	Example
.yui-gd	1/3 – 2/3	Example
.yui-ge	3/4 – 1/4	Example
.yui-gf	1/4 – 3/4	Example

代码里面一堆这种类名难道不是一个抓狂的理由吗？

table布局

还不如table布局简单呢。

2.不灵活

雅虎的工程师基于IAB的一个理论，希望推广“对于广告尺寸限定18个标准单位”这个活动，他们认为标准的设计框架中边栏最好是160px、180px、300px这三个数字，于是在它的代码预设中限定了这三个宽度。我们当然可以更改这个宽度，可是完全没有oocss方便，至少不是改一个数字就可以解决的事情。

相比之下，oocss的优点就很明显了：1.可自行设定边栏浮动方向和宽度，主内容区域会自行伸缩 2.container（YUI里叫grid）命名更加理性好记，是size1of3或者size2of5的，即使没有cheetsheet也可以轻松在Firebug中修改。

在YUI3中，雅虎团队去掉了grids.css，仍然保留着其他三个样式（reset，base，fonts），也许他们也意识到现有grids的不完美之处，相信他们一定能做的更好。