前台开发从头说起:关于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这些与结构无关的属性来帮助实现样式或者行为。

在博客园上,暴牙齿提出“独立于根”的想法。我个人认为从文档结构的角度,并没有“独立于根”的要求。但是如果能够达到“独立于根”的开发能力,那么实现起标准化来就绝对会非常得心应手。因为连“独立于根”都能实现自己的设计样式和行为的话,有了结构的文档就更不在话下了。

理解了标准化的本质和终极目标,如何通过css和javascript来达到这个目标呢?这个问题,留到本系列以后的文章再谈。

               

前台开发从头说起:关于web标准化》上有4条评论

  1. Pingback引用通告: 前台开发从头说起:谈谈CSS选择符 | 所谓技术 - 小李刀刀博客

  2. 小李刀刀 文章作者

    游客 :

    css外联分离不是难事
    JavaScript利用jquery等插件实现分离也不是难事

    但若是没有class,id来给页面元素命名,前面两条是不可能实现的
    这不是能力的问题

    本文作者明显没有做过前端开发

    id和class不是不能用,而是不能滥用。至于你说的没有就不能实现,是你的javascript和css能力达不到。我会在后面的文章里证明给你看。

  3. 游客

    css外联分离不是难事
    JavaScript利用jquery等插件实现分离也不是难事

    但若是没有class,id来给页面元素命名,前面两条是不可能实现的
    这不是能力的问题

    本文作者明显没有做过前端开发

评论已关闭。