对于页面的设计一直以来，前端开发与设计师的磨合都是一个问题，设计出来的东西是不是一定要完全与设计稿一样呢？设计稿是不是也要计算呢？设计师是把设计完后的东西直接给开发吗？开发难道还要为不完全的设计做最后的调整与修饰吗？ 既然我们已经做了这么多的项目，那有一些经验我觉得还是值得跟大家分享一下。 关于设计 对于大多数网页设计师来说，设计可能就像平面设计一样，排版，调色即可。但是这里我要说一下网页设计与平面设计有非常大的不同，其中最不同的一点就是，网页设计是有精度的，不仅仅要对大版面考虑精度，对于细节同样需要考虑。甚至是文字的使用与字体大小 ，行距等。 其中的计算我在以前的文章中都有介绍。 前端开发手册之设计篇 里面详细的讲解了关于字体与设计时应该计算分格的问题。 前端MVC – PSD设计篇 里面也同样讲解了关于PSD转HTML时应该注意的问题。 我这里以GlobalMakret Web Design 2011为实例，这是设计稿（已经去除辅助线与标尺）： 关于前端开发 在完美的设计之后，就到了实践的步骤，让设计稿动起来。 在这里首先要说一下，关于字体的差异，在PSD转HTML时一大问题就是字体不能完全转换，因为浏览器渲染的问题，不同的浏览器里对字体的渲染并不相同。所以这在设计时同样需要考虑的问题。 先看图，开发后的HTML页面（Win7 Firefox3.6 截图）： 可以看到Win7对于字体的渲染效果还是非常不错的，由于使用了ClearType技术，对字体的渲染几乎可以达到PS里的锐利效果（对于IE效果会更好些，IE对字体的渲染一直都不错）。 重叠 设计就让他完美的去实现，这才是我们的目的，不然设计师费了那么大的力气设计的作品就这样被糟蹋了肯定会骂娘的~ 这是把两加图（设计稿与浏览器截图）重叠后的效果图，从图可以看到，图片是肯定可以Perfect Pixels！但是文字的确非常难，但是我们也一定要至少保证首字母是应该重合的或者差不多重合，由其是行距，这行关键，因为设计就在于这几PX的版本中，如果这都无法保证，那就相当于没有设计一样！ 问题 图中依然可以看到有些问题的存在，就是更改，在设计时由于不能把信息提供的准确，而最终导致终稿与实现的还是有差异，不要小看这一点点差异，对于精益求精的我们来说，是非常难以忍受的，因为很可能这样就没有辅助色，或者没有了中灰色！或者由于格的间距发生变化，留白就会了现差异，这就严重的影响了视觉效果。 在现在来说，在设计之初提供的东西非常有限，都喜欢做完后再添加东西。这点要在平时尽量的去灌输思想，并且在实践中让大家更默契才能减少问题的发生。优质的产品是源于团队的默契！ （由于XP对字体的渲染与Win7相差比较大，所以在XP下不开户ClearType，只能保证80%的相似度。） 后计 设计一定要将他完美的实现，实现一定要更精确！ 所有简单的事情，把它做的精细就是完美。 有相关问题欢迎与我讨论联系方式 YSjia

在开发中，说实话，一般的公司可能都不会有写文档的时间，并且个人也不一定都有这习惯。 但是对于你来说，代码就是你的一张脸，当别人读的时候，你总不希望别人说：“天阿！怎么这么丑！！！”如果正好你这时在旁边，那将会是一件多么悲催的事~~ 那么让我们简单的为这张脸美容一下，代表自己嘛，肯定不要太悲催了，哈哈。 让代码自己说明白为什么这样，大家肯定想到了写注释。 写注释也有好多种写法，比如说能直接生成javaDoc的注释风格等 但是即使生成了，这文档又会有多少人去看呢？又有多少人能看懂呢？ 所以，还是让我们来简单点吧，只会占用你一点点时间，就让你的代码看起来更加的漂亮。 CSS 对于CSS，也许经常会使用到缩写，但是过一段时间，自己也许都已经已经不记得了~囧！ 写一些必要的注释，解释缩写的意义。对于其他人来看，这让他们更快的明白；对于自己过一段时间后再看，可以迅速的回想起当时的思路，易于修改。 jQuery ui theme的风格，这种命名方法，个人感觉是非常不错的方法，即易于记忆，同时也易于理解。 命名空间，虽然CSS里面这个概念很弱，或者说因为权重的问题不存在命名空间这个概念。但是如果把页面上每一块都分割开的话，那么每一块应该是相对独立，在独立的范畴内应该使用同一父级的class做为命名空间。这不仅仅是权重的问题，也增强代码的可读性。 多使用换行，对于不同的区块，应该使用换行让代码上的逻辑也更清晰。 javascript javascript有很多不同的注释写法，我这里绝对不是标准的，大家请仅仅做为参考。 写注释的目的就是为了让代码自己可以解释自己，并且说明自己的用法等。 在注释段里面放些简单的实例，让新人更容易理解已经公司现有的Base类库。 遵循着某总风格。因为javascript的灵活性，使得使用这门语言的人可以用各种写法来达到目的，但是实事让，如果在团队里每个人的代码风格都相差很大，不但看起来不爽，读起来更不爽。 所以我们一定要遵循某种结构。 噢，对了，在组件的前面，或者段落前要写上自己的名字，这点很重要，因为其他人要修改的话，至少要知道这东西是谁做的，可以找谁商议。   以上一些步骤其实都不复杂，但是你的代码会因此清晰点。 输入的指令是要让编译器明白，如果它不明白，OK没商量直接给你抛Error~ 写注释，是为了给人看的，如果只是机器能看懂，那还不如不写了。

一般情况下经常发生设计师的稿件由于计算的不够精准，在实现时发生偏差较大。 由于网页设计与网站开发经常需要与人合作，不论是设计师还是策划还是开发人员他们之间的合作往往非常密切。 我们从设计稿开始入手。 没有绝对的自由 完美的精度1px 网页设计与杂志设计不同在于，网页有更多尺寸上的限制，这点跟报纸排版比较相通。 不能凭感觉就堆放与目测，需要精准到1像素的级别。 而设计师也需要对页面的布局相当的了解，商业网站分割区别一般很多，所以需要尺寸灵活把握，这样才能做出更精准的设计。 千万不要想着让其他人（制作人员）来想这些计算的方法，每个人都多做些事，合作起来才会更愉快。 Grid 而对于大网站来说，网站页面的数量也是非常庞大的，而制作的人相对较多，这样，要保证每位设计师出来的效果都是可以轻松被制作出来，需要一套标准，一套格（Grid）还是需要的。 字体 商业网站，由其是大型商城等网站的设计，由于对流量与加载速度的考虑，会少会图片所以其可用字体其实是非常少的，所以设计师的难度也就无形中的增加了，但是可以根据访问流量与用户所用浏览器系统等，用少量特殊字体，增强视觉效果，但是必须要有备选的方案，保证其他人也能正常的浏览。 更多信息 重要的信息指引是快速制作与开发的根基，所以网页设计也一样，设计师应该把一些基础的标准值都标记出来，比如说边框的颜色、边框的种类、应用的场景等进行标注，这样不仅为开发人员提供了良好的可读性，同时也可以大大提高开发效率。 先有数据，再有设计 现在一般认为先要出设计稿，然后再往里填充数据，其实是这真是大错特错。我们被模板时代给坑害了，更把模板的感念给误解与曲解，认为一切都可以模板化。 而事实是先要进行数据分析，然后再对数据进行可视化，往往连最基本的数据都没有就纸上谈兵，这只会走更多的冤枉路与耗费大家的精力与增加合作之间的摩擦。 只有仔细的对数据进行分析，才会发现，原来还有这么多“特殊”的存在。所以预测数据的精准度，将决定着设计稿（PSD）写实际搞（HTML）的偏差值。 虽然不能做到万无一失，但是知己知彼，百战不殆。 同样可以减少摩擦与挫败感，增强合作的愉悦。 没有简单的事情 当需求人员把东西拿过来，永远不要“小看”这些数据，这里需求人员也要注意。 永远不要说“这个很简单，这样，这样，然后这样就行了”… … 这样的后果就是不断的返工与无休止的争论，即使再小的Banner也有他特殊的地方。 先写这么多，想到再写~~

视频&PPT Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video Professional Frontend Engineering View more documents from Nate Koechley. 由Yahoo前端工程师Nate Koechley演讲。深入的讲解了什么是前端工程师。 前端工程师需要了解的领域与相应的技能、为什么需要高级前端工程师。 整个谈话的四个部分: 透视历史 我们的信念与原则 知识与最佳实践区 为什么这是所有事项? Y.Jiajia：前端工程师不仅仅是来写HTML\CSS\javascript的，更多更重要的角色需要从整个行业入手，使我们的网站前端战线更安全、更友好，这些都是需要前端人员考虑的事项。

在开发越来越深入，越来越复杂，人员也越来越多时，各种各样的团队问题便随之而来。 以下列出一些我在开发中经常遇到的问题，并应用相应的方法来解决，大家有很好的建议不防提出来大家讨论。:) 问题 设计： UI不够统一 设计不规范，导致制作时出样式出现偏差 CSS： CSS过于混乱，多人联合编写时命名空间冲突问题 各自为政，不能使相同的部分共用起来，造成沉余与维护困难 乱用Selector优先级，导致无法更新样式。 HTML: 结构嵌套问题 语意不明确 解决方案 设计： 多利用草稿，制定初期架构草图（图1） 制定统一版式与UI样式（图2） 精确计算宽度值与其他数据（可以蓝图阶段进行），并严格遵循   CSS： CSS采用统一的命名规则如：header_wrapper, main_containter或header-wrapper, main-containter 注：后一种写法header-wrapper在.net的服务端控件中会报错，由于.net中无法识别id中含有‘-’ 通常我的作法为： id:headerWrapper class:header-wrapper 当然其实我还是建议采用‘-’的写法，如果不是为.net做开发的话。 引用类库或自己编写相关类库，并制作相关文档，按文档编写。这样可以最大限度的避免命名冲突。 另外一点就是在全局引用‘命名空间’的做法，因为CSS本身并没有这一概念所以需要做一些hack手段 代码: <html> <body class="text-page"> … </body> </html> 利用CSS的权重进行的hack，也是一种比较通用的hack手法，这样就可以利用CSS的优先级来做不同的样式。所以CSS的优先级是个非常重要的工具！ HTML： 对于页面的基础，莫过于HTML。整个架构的骨架！ 为避免大规模开发时造成不必要的混乱，一定要按W3C的一些标准来实施 可参考：符合XHTML Strict 1.0 W3C组织标准的标签与结构 进而就需要考虑应用一些规则 如：Grid System 这里先打个招面，以后的文章里再详细说明一下Grid System。 现在网站大家都是即时开发，很少有整理与规划HTML的习惯，鉴于这点，应该多向CSS Zen Garden学习，整理由最适合用自己的骨架。