YUI学习笔记 – CSS Rest、Base、Font以及Grid

YUI不仅为我们提供了一个强大的JS框架，同时还提供了几个CSS的框架，分别是Reset、Base、Font以及Grid。通过在页面中引用这几个CSS，可以让我们的前端开发工作事半功倍，达到快速将美工图转化为实际产品、并且能够保证在绝大多数浏览器上的正常表现。今天我们就来了解一下这几个CSS。

YUI这几个CSS存在于两个版本的YUI中（YUI2和YUI3）。本文的介绍以YUI3版本为例。

1、YUI3 Css Reset。

做过前端的朋友都知道，目前众多的浏览器，对于HTML的解析并不是完全一样。比如 li ，这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在各个浏览器下的不同而设计的。这样，我们在 Build 我们的页面的时候，就是建立在一个完全一致的基础上，能够非常方便的让我们按照自己的想法去进行排版布局。通过这个例子我们可以看到，使用了 Css Reset之后的样式会是什么样的。

YUI3的Css Reset还提供了局部的Reset样式的功能，在我们想对某一容器内的元素（而不是整个页面）进行样式统一时使用。

2、YUI3 Css Base。

Css Base是一个补充YUI的核心CSS框架的文件，Css Base 为符合 A-Grade Browsers的浏览器提供了一个标准的基础。这个文件也可以作为我们扩展自己CSS框架的基础。同样Css Base也有全局（Global）和局部（Contextual）的选择。

3、YUI3 Css Fonts。

Css Fonts保证了跨浏览器的字体一致，即使在用户对字体进行调整情况下也是如此。不管是标准模式（Standard）还是怪异模式（Quirks），只要是A-Grade Browsers 都支持。

4、YUI3 Css Grids。

Css Grids 提供了一套基本的、简单的布局系统。我们使用CSS进行布局时，不需要再为两栏、三栏以及各种分栏形式而烦恼，使用Css Grids可以快速的实现。YUI3 Css Grids中对于命名规则进行了改变，这与YUI2 Css Grids中有很大的不同。不过基本原理还是一样的熟悉了任何一个，就能够方便快速的进行页面的布局。Css Reset、Css Font、Css Grids三个合起来，构成了YUI CSS的一个核心。我们可以一次将这三个文件引入进来。当然，现在YUI3的Css Grids还在Beta阶段，还不是太完善，如果我们需要一个成熟的解决方案，可以考虑使用YUI2的Css Grids，使用YUI2的Css Grids并不会影响我们使用YUI3的框架，他只是一个样式表嘛 :)

参考资料： 1、YUI CSS Reset 2、YUI CSS 3、A-Grade Browsers