前面写过一篇我自己对css、js、html三者关系分析的心得，可以点 我 查看文章。这是我写这篇记录的理解的前提！
首先我们来看一张图，这是我目前对html、css、js关系的理解。(点击可放大观看)
从图中可以看出，javascript可以控制html,并且还能修改html的样式。而html是一个数据的承载体，也就是说，在浏览器中，js通过控制html的dom节点的增减、内容的改变来达到控制页面的数据，并且js要改变其样式，也是要先找到html对应的dom节点，从这里看出，需要先有html，从而js有了被控制体。而css应html而生，如果html不存在，那么css就没有“施法”的被载体。这些都说明，html是你写css和js的前提，也即如果html不存在，谈不上写js和css！所以可以得出在写页面过程中大概需要经过以下三个步骤吧！
就好像盖房子一样，你需要整体搭建一个架构起来，然后去装修什么的！那么怎么写html呢！我这里有一个思想就是，从你得到的psd图那里分析，根据内容展示情况把页面按“块”的概念具体分出来，比如把你的页面大体分为顶部、内容区、底部等。这样你就能具体针对每块的内容去具体写dom结构。在具体写的过程中，始终把握一个思想就是：你的某个部分需要有“特别的”样式、或者将来js需要控制到，那么这个地方一定需要加一个节点。因为只有这样，将来js、css才能通过这个节点控制它、改变它的呈现方式！概括起来就是写html采用的是一种自顶向下、由外及内的分块方式构造。可以看下面的图片：（点击可放大观看）
采用这样的思路，你会发现你不会太绕，而且能集中精力去分析某一部分的构造思路、dom优化等！
之所以把css放在第二部，主要基于两个方面的考虑：第一，我们的页面保证需要在不支持javascript的浏览器中，也能完美的呈现，虽然现在看来貌似现代浏览器这种情况很少存在，但是从严谨的态度出发，你还是先这样写吧 ，再说，js写出来性能也会相对比css来说差一些；第二，我们的页面，如果对于显示这一块将来是一直不变的话，那么就可不用js来控制css了，js改变页面，是在你的原有的样式css上修改的，比如做一个动画效果，那么这里css本来是写好的，只是后期js通过调取一个定时器来不断的改变css某个或某几个属性来达到动画效果的！所以从这点考虑，也是先写css、再写js！
那么怎么写css应该注意那些问题呢！其实思想还是有几点！
第一点：你首先要覆盖用户代理（浏览器）默认的样式，因为浏览器本来是为元素设置了默认的样式，但是在这些样式，现实开发中因为需求不同，很少需要用到，所以我们需要第一步把这些样式用自己后面写的样式覆盖掉。覆盖样式，有两种方式，第一种是针对实际元素分开写覆盖样式，但是这样写不仅重复，而且无趣重复，难以提高动作效率。第二种方式就是在一个单独的地方统一对这些浏览器默认样式进行自定义初始化。这样便于管理，也能有效提高效率。如下面的代码：
第二点：针对你得到的psd图，进行一般样式的编写，所谓的一般样式，就是网站整体风格可以提炼出来的相同的代码，比如：
上面跟你举出的这些样式代码，可能在实际开发中，许多地方都要用到，我们不妨把它们单独提炼出来，以免在需要用的地方直接套用，这样不仅可以提高效率，而且可以对你一些css代码分离性、细粒性有很好的作用，在后期维护的过程中也会方便的多。
第三点：也是我目前想到写css代码的过程所想到的最后一个步骤。这里要求我们最后针对特定元素写特定的样式，当然工作量是最多的，可以说占到90%。那么这里我说几点，我在写的过程中遇到比较突出的问题：
1、尽量把你的css代码模块化，顾名思义就是头部的样式尽量写在一起，脚步的样式尽量写在一起，因为这样不仅可以让你专注于一个地方写样式，而且在后期查找有需要改的地方比较方便。
2、大量采用后代选择器吧！这样你会发现会为你减少想类名而代码的痛苦，比如你为每一个html元素想一个类名，你的页面比较大的话，一个页面有几千个节点，那你岂不是要想几千个类名？而采用后代选择器可以有效减小这个问题，只要父类名不同，子类名相同也是可以的。但我目前发现，如果过分写后代选择器也会有问题，比如你的后代选择器嵌套的层数大于了5，那么你后期改样式将会很困难，因为随着层数的增加，css代码的优先级会越来愈高，这意味着比如现在5层的后代选择器，将来你发现个别地方要特殊写，此时你就比如同样写5层来来覆盖，这是件很痛苦的事情！
3、尽量少采用id选择器!虽然id选择器的优先级很高，但就因为如此，它把css代码跟html绑得更死，后期要改也会出现跟第二点同样的问题。还有就是id选择器命名是唯一的，如果过量的使用id选择器，那么命名冲突问题很严重，毕竟id选择器跟js联系到一起的，所以还是很特别、唯一、要用js的地方用id选择器吧！
4、写注释！这点不用特别说明，为了你自己查找问题、修改问题，也为了别人修改你的代码。
我相信通过前面的描述，应该知道为什么需要把javascript放在最后写了！所以这里所以写javascript代码需要注意的问题。我想到如下几点：
1、浏览器兼容性！这恐怕在前端开发过程中遇到的最痛苦也是难点的问题了。那么我说一下我对兼容的理解吧，其实浏览器每一个版本对开放的js接口是不一样的，所以做兼容，你就得针对特定版本浏览器开放js接口有一定了解，比如在老的ie版本浏览器中不支持用addEventListener监听事件的而支持addEvent监听事件，而ie10+是支持addEventListener的，所以你可以判别一下用户代理，进行浏览器版本的判断然后使用对应的方法。同时不同的浏览器厂商针对同样的需求也会有不同的借口，比如的ie阻止默认事件的采用的window.event.returnValue = false;而其它厂商的浏览器则采用的是event.preventDefault()阻止默认事件。所有这些东西通过不断项目开发就会熟悉这些接口了。那么我想说一下我对什么时候需要对浏览器做兼容必要性的理解：
（1）、还是根据你目标用户来说吧 ，如果你的目标客户都是年轻一代的人，或者说你的产品是比较新颖的产品，那么我觉得没有必要去做老版本浏览器的兼容的，因为首先来说，难度比较大，开发进度会比较慢，实际意义不大，而且毕竟老版本浏览器兼容做出来的页面也会有很多bug，你的产品是希望可以给用户带来更好的体验，采用现代浏览器不仅可以很好的引导他们尝试新鲜的东西，培养用户接受自己的产品有很好的作用。所以可以放弃老版本的浏览器兼容了，我看到目前许多知名的网站他们老版本的浏览器兼容是放弃了的。（2）当然了，你的页面为了追求最大的兼容性，并且工作进度问题影响不是很大的话，或者针对年龄阶段比较大目标客户来说，还是可以做老版本浏览器兼容的！这样可以培养用户的品牌认知性和提高各年龄阶段纵向用户粘性吧！这是我想到的，其实我觉得现在都兼容问题必要性都不是那么强烈了。
3、……………………内容待续