本文作者@EdwardUp我们常以“整齐”，“易读”，“亲切”，“易于维护”，“复用性强”等来形容一些优秀的开发者所写的代码。现在，对代码的好评还有一个更为时尚的词“优雅”，是不是听起来觉得很亲切呢？
页面是互联网产品的表现层面，不仅讲求外观，而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者，经验积累是必不可少的，而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容，希望对这些细节内容的探讨，可以帮助各位页面开发者做得更出色，以更优雅的姿态来书写页面。
从Photoshop开始
从UI设计稿到静态页面一般都称作“切图”。这个词很容易令人联想到Photoshop中的“切片工具”，但现在切片工具用得并不多，大部分在页面中需要用到的视觉元素，都需要拼合到一个或多个单独的图片中。
视觉元素的分离和拼合
快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果，也因此有时候没有时间整理UI设计稿源文件。所以，拿到手边的UI设计稿，可能存在图层缺少命名，分组混乱等问题。
如何快速找到需要分离的视觉元素所在的图层？这时候应该使用的是Photoshop的“自动选择”。另外要注意的是，某些边缘阴影及高光是由图层样式生成的，在选取这些部分时应选取旁边的实际绘图内容。
Photoshop的“移动工具“，在使用时勾选一个“自动选择”的复选框即可。此外可以设置是自动选择图层还是图层所在的分组。
拼合是在一个新建立的psd源文件上进行，命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列
能看出特别的地方吗？没错，就是所有的html节点，不管位于DOM结构中多深的位置，都有自己的class命名。
为什么要这么做？
首先，需要明确，少一些class命名，通过节点之间的相互关系，当然也可以实现对正确的html节点设置样式。这也是我们过去写html一般的做法，并认为这样可以精简html。事实的确如此，但现在我们应该认识到，精简的html却会带给我们越来越麻烦的css维护。
CSS Wizardry的Harry Roberts对此做了简单的解释说明。
Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >.<
意思是说，就像我们为什么给人取名字一样，当事物被精确地命名后，事情会变得容易许多。稍微想一下就可以理解，直接说“皮卡丘”比说“小智一直带在身边的神奇宝贝”要简单地多。更重要的是，如果节点的位置发生了改变，原来的基于节点位置的写法就不再正确了，但使用名字的写法则不会存在这个问题。
把一些工作推给html，让css更加容易一些吧。想象自己是一个班级的老师，有什么会比每一位同学的名字更方便表示每一位同学呢？
外观与CSS
CSS本身很容易写，但合理的CSS架构却不是一个简单的事情。要保持CSS的可维护性，最简单的做法就是追求CSS的复用性，尽可能减少CSS量。
任何时候，都要写CSS注释
CSS一般来说可读性较差，因此需要我们多写CSS注释。注释内容越丰富和细致越好，而且建议结合ASCII Art
设计团队：微博UDC
（雷锋网 Warlial专稿，转载请注明来自雷锋网及作者)
标签：西部数码 前端开发 互联网产品 UI设计 静态页面 页面设计
热点关注
