谈谈DOM结构的重要性

其实在很多Web前端招聘都很少谈及DOM结构的问题，大多都跟JS有关。但是nelson个人认为一个好的页面的含义更重要的是一个好的DOM结构，因为页面的内容都是通过DOM结构呈现给用户的，所以一个好的前端工程师所具备的远远不止会写好一段好的JS代码。

一个好的DOM结构能够少写很多代码，特别是CSS代码，因为DOM结构是直接跟CSS挂钩的。

根据nelson这些年的bug-fix经验，很多时候bug的产生都是因为DOM结构没有写好，以至于样式里多了很多的CSS HACK代码。而反过来我们只有写出一个好的DOM结构那么，将可以避免很多的CSS HACK代码，当然还能更多的减少CSS代码。

我就那拿CSDN上的博客列表页代码说话：

<div class="article_title">
    <span class="ico ico_type_Original"></span>
    <h3>
        <span class="link_title"><a href="/do_it__/article/details/6691413" title="也写图片延迟加载">也写图片延迟加载</a></span>
        
    </h3>
</div>

这段代码的本意就是为了呈现一个标题。但是有必要写得这么复杂吗？nelson自己重写了一下它的代码：

<h3 class="ico ico-original">
        <a href="/do_it__/article/details/6691413" title="也写图片延迟加载">也写图片延迟加载</a>
</h3>

为什么nelson这么写呢？因为这只是一个标题，既然用背景作用在<span class="ico ico_type_Original"></span>来实现一个小图片，为什么不直接放在h3里做背景呢？这样不是更简单而且不需要定宽高？

当nelson再看它这个小图片怎么去写的时候，竟然发现它用的不是CSS Sprite图，而是简简单单的一个小图标而已，那么有必要做背景图片吗？

这仅仅只是nelson个人的做法，当然，写那段代码的人所做的不能以我个人的角度去评判它什么。

这里所有例子仅仅只是一个参考，不代表nelson有什么攻击性的言语，只是在说明作为前端开发工程师，我们可以写出更漂亮更简短的代码，以此共勉。