关于Web标准化

 
虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

web标准化的精髓或者说本质到底是什么呢？其实很简单，就是“结构、表现、行为分离”。这句话看起来简单，但是真的实现起来，就不那么容易了。分离，分离到什么程度算是标准？分离的目的是什么？举例来说吧。

既然要分离，那么耦合度当然是越低越好。

以样式为例。我们可以把所有的样式都放到外部CSS文件中，那么，CSS规则如何影响你的页面元素呢？有时候用到ID，有时候用到class。如果你的页面充满了ID和class，那么实际上分离得就不怎么彻底，因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的，他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制，而在页面文档中加入大量，甚至过多的class。

再以行为为例。很多时候我们需要和用户交互，于是要给页面上的元素添加“onclick”，“onchange”，“onmouseover”等属性，这些属性编写在页面文档中，依赖于外部javascript。一旦外部的javascript被拿走，页面就出现执行脚本错误，甚至完全不能正常阅读。在这种情况下，javascript实际上和xhtml就没有能够解除耦合。

实际上，由于只有xhtml、css、javascript三者存在，我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么，我们所谓的彻底分离，其实从三者分离的最根本目的来说，就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript，xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢？依赖于xhtml是必然的。

如此一来，如何解除耦合呢？其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套，尽量去除class和事件属性。比如：

<ul>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">国际新闻</a></li>
    <li><a href="#">财经新闻</a></li>
    <li><a href="#">体育新闻</a></li>
</ul>

这样一段源代码，从文档结构的角度来理解，它就是一组彼此关联，没有先后和主次之分的列表，可以理解为列表，也可以理解为目录。

但是在css的作用下，它可以变成菜单、导航条等各种形式，如果css和javascript相结合起来，它还可以变成滑动门、三态菜单等。在这种情况下，css负责表现，javascript负责行为，而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么，都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

随之而来的好处，那就是页面的兼容性，不管在什么样的浏览器里，这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover，搜索引擎想要的只不过是链接地址和链接文字。

那么，没有class，怎么实现样式呢？没有onmouseover或者onclick，怎么实现javascript事件呢？这就需要网页开发人员的css功力和javascript功力了。

所以，越是标准化，对css和javascript的技术要求越高。反过来，css的能力达不到，或者javascript的能力达不到，那就需要借助于class（id和文档结构有关，不算在这里，后面我们再谈）、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。