今天在cnbeta上看到一片作者评论div+css的文章,标题为“DIV+CSS 请不要再出来忽悠人了!”,文章的大致内容如下:
<blockquote>今天,尽管提到DIV+CSS,还会有很多人热情高涨,但是我会对他摇头了:DIV+CSS不是一切,更不是某些人所谓的“神话”!创造神话的是CSS,不是DIV+CSS。我想,是时候纠正这个问题了。 CSS的要义,是各个标签要各尽用,盲目推崇DIV+CSS只会让小白误入歧途的。 1、DIV只是HTML最常用的标签之一 显然HTML并不只是一个DIV标签有用,每个标签都有它的用途,只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能,那么W3C早就把HTML精简了! Table也不是一无是处,只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网页数据的表现上,是其他标签无法替代的,只是,它不适合用来做整个页面的布局。 2、代码的可读性 纯DIV+CSS的网站的代码的可读性无疑是非常差的,甚至table还可以通过tr和td来区分行和列,一堆DIV堆砌在一起,如果没有注释,你根本不知道某个部分是做什么用的。 3、语义化与结构化 现在,在开发CSS的时候,提的越来越多的是语义化,语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读,更加易懂,比如,.text_01{color:red} 就没有.text_red{color:red} 容易理解。 HTML同样如此,比如我们看到<ol>就知道这是个有序列表;看到<p>标签就知道这是一个段落,内容为文字;看 到<span>就知道这个是比<p>还小的文字单位;看到<h1>、<h2>之类的就知道他们是标题。 显然,全部是div的页面,是看不出来这些的。 页面的结构化亦是如此,比 如<div><div><div><div>…..</div>< /div></div></div>这样的代码,显然是很难理解其DOM结构的,但 是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那个结构要清晰很多。 相信做开发的人对代码的语义化和结构化的理解会更加深刻。 4、团队合作 可读性低、结构化和语义化差,团队的其他成员的学习和维护难度就会提高,这对于一个团队来说,是很浪费时间和精力的。 其实,DIV+CSS的说法,已经把我们从table带到了另外的一个极端,正确的网页设计不是一个标签雄霸天下,而是每个元素都使用合适的标签。 所以说,DIV+CSS要换一种说法了,(X)HTML+CSS不更合适吗? 请不要再特意提DIV了。小白们真的会把它当作宝贝的! 其实回头看看国内普及标准化的过程,已然走错路了,就在国外同行研究CSS Sprites和网格(Grid)等技术时,我们在做什么?就在国外CSS框架遍地开花的时候,我们在做什么?到现在我们还是只能去国外的东西,依然跟在别人后面。</blockquote> 作者提到的“每个元素都使用合适的标签”这一点,还是非常正确的!但作者说div+css的学习和使用者是走错了路,走了极端,这点我个人认为是有问题的,写出这类代码的人他应该只是处于过度阶段,对于xhtml的标签的特点和不是十分了解,以至于只能反复用到一些常用的标签,如作者提到的div标签,但随着对xhtml标签的理解逐步加深,他们慢慢认识到用合理的标签,不仅能让代码结构简化,而且还能是代码易读; 为了能让正处在这一过度阶段的朋友更好了解到xhtml标签,我简单介绍下各标签: Document Outline <!DOCTYPE>Version of (X)HTML <html>HTML document <head>Page information <body>Page contents PageInfomation <base />Base URL <meta />Meta data <title>Title <link />Relevant resource <style>Style resource <script>Script resource Document Structure <h[1-6]>Heading <div>Page section <span>Inline section <p>Paragraph <br />Line break <hr />Horizontal rule Lists <ol>Ordered list <ul>Unordered list <li>List item <dl>Definition list <dt>Definition term <dd>Term description Forms <form>Form <fieldset>Collection of fields <legend>Form legend <label>Input label <input />Form input <select>Drop-down box <optgroup>Group of options <option>Drop-down options <textarea>Large text input <button>Button Text Markup <strong>Strong emphasis <em>Emphasis <blockquote>Long quotation <q>Short quotation <abbr>Abbreviation <acronym>Acronym <address>Address <pre>Pre-formatted text <dfn>Definition <code>Code <cite>Citation <del>Deleted text <ins>Inserted text <sub>Subscript <sup>Superscript <bdo>Text direction Tables <table>Table <caption>Caption <thead>Table header <tbody>Table body <tfoot>Table footer <colgroup>Column group <col />Column <tr>Table row <th>Header cell <td>Table cell Images and Image Maps <img />Image <map>Image Map <area />Area of Image Map Object <object>Object <param />Parameter |
|