WEB前端设计:良好的页面结构和优美的代码【阅读季】

　　但凡从事互联网的人基本都会写几行html，用过Word的人用Dreamweaver也能作出规整的页面，因此大部分人会很天然地认为“页面的开发没什么技术含量，很简单”。不只有这种广泛的认知，对从业者来讲也有不少疑惑：作页面前端实现，没问题；兼容性，小case…还能有什么问题？是否是真的没什么问题了呢？这里面的水有多深，让咱们舀舀看。

　　在不一样的时期对页面前端的见解彷佛是多变的。在互联网早期的时候，那时的页面设计风格相对单一，对应的页面需求比较简单，而且当时的浏览器也基本是IE6的天下，javascript也只是网页特效的代名词，HTML页面自己没有引发太多人的关注，彷佛只要能用div甚至table加css辅助把图片定好位，把页面内容预留好就OK了，而且这种观念存在了很长一段时间。随着页面内容的丰富，设计风格的发展，交互复杂性的增长，AJAX的应用，浏览器的更新换代，又让你们从新对最基本的页面自己重视起来。而后热议的就是浏览器的兼容性，碰到问题最热衷的就是满网络搜索hack，顺便再骂骂IE六、7……

　　实现效果图是最基本的工做
　　把视觉稿经过页面代码的方式表现出来包含了两个基本诉求：

　　1.可以真实反映视觉稿；

　　2.可以经过浏览器的兼容。

　　这两个诉求的达成须要咱们有追求细节的态度和必定的页面功底，能完成这两个内容就能够初步进入页面前端的从业者行列了，但这就表明着咱们能够胜任页面开发的工做了？不，才刚刚开始！

　　与页面设计师的沟通和项目的参与
　　沟通很重要。

　　先抛出几个问题：

　　咱们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大？

　　有没有探讨过部分效果能够用CSS3实现从而使得结构更加简洁清晰？

　　有没有在代码和视觉中寻追求过平衡？

　　页面前端的开发向基本用户，编写的代码也直接做用在浏览器上，咱们有义务对页面的稳定性和渲染效率负责。咱们也常常碰到项目在整体进度压力下致使的设计与页面前端开发同步进行，这时更有必要尽可能多地获取项目信息，了解咱们还要作些什么，这些能够帮助咱们充分考虑重用和框架拓展。

　　良好的页面结构
　　页面结构的编写比如盖房的地基建设，其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到之后的页面拓展、迭代和页面调整。

　　拿到视觉稿后，不要忙着动手开始，多观察思考。先分析布局，划分框架，而后规划结构，编写代码。特别在大型项目中，合理使用模块化的开发不论从总体进行仍是拓展维护都有至关大的好处。 

　　关于hack
　　不少同窗在页面开发时上网搜索最多的就是hack了，是否咱们彻底要依赖hack来实现页面兼容性，答案是否认的。

　　你们常常比喻IE6向咱们撒了一个谎，结果咱们要再撒一百个谎来圆这个谎。不否定IE6常常让咱们口吐鲜血，但不表明咱们用更多的“谎话”来弥补就能够问心无愧。大部分状况下能够经过变换思路调整HTML结构，或使用一些虽然没法解释但相对安全的css来干掉hack。谁都没法预计使用hack何时会让咱们栽一个大跟头。

　　优美的代码
　　如今不少web项目功能复杂，代码规模也会变得很庞大，如何更好地进行协同开发和维护是咱们面临的一个问题。

　　须要考虑完善统一的规划，还有要养成良好的代码开发习惯才会在面临各类状况时游刃有余。翻阅页面代码，看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的css不只犹如欣赏一个艺术品，更为下游开发和协同开发下降了不小的沟通成本，咱们有什么理由不去这么作呢？举个反面例子：div滥用是如今比较典型的一个问题。数数看本身使用的标签有多少个呢？不一样的语义都该使用对应的标签代码，它们都苦苦地在等待战场上的冲锋号，让咱们去解放它们吧！

　　拥抱HTML5
　　这是一个充满机会的时代，HTML5时代的来临伴随着移动互联网的兴起创造了更大的机会，还有太多的东西值得咱们去学习去发现。 HTML5提供了丰富的JS API接口，须要咱们去研究；CSS3的绚丽吸引了足够多的眼球，须要咱们去研究；移动设备上如何开发更加适配的页面，须要咱们去研究……

　　Stay Hungry, Stay Foolish
　　水是越舀越多了，却发现原来下面还深不见底，上面的内容越是深刻研究就越会发现更多山川须要翻越。保持饥饿状态，用眼睛去努力发现发掘，不断丰富技能才能找到定位，突破瓶颈，正所谓“惟有高屋建瓴方可水到渠成”。造成本文是由于以前和同行讨论到瓶颈的问题，想给本身，给页面前端的同窗一块儿找找定位，梳理一下思路。拿苹果CEO在斯坦福演讲的一句话“Stay Hungry, Stay Foolish”和你们共勉。