做Web前端开发，网页布局和美化不可避免，心想不就div和css吗，标签、属性、样式没啥了，可不曾想和静态页面设计人员打交道竟成了可怕的梦魇，而且一次又一次。当我愤怒地做起兼职设计，修改那些垃圾代码时，心中便暗中发誓怎样才能避免这样的情况再次发生，那些样式能不能优雅一些呢？前段时间也看过某大大的文章，确实啊，美工们全活在乌托邦！美工如果不了解一些技术实现和业务流程的话，说实话，很难和开发人员耦合好!下面简单说一点自己的看法吧。
1.绝不重复，让你的css优雅起来
做布局设计，大局观很重要，需要抽象出来哪些是必须和多次使用的元素，一般div和ul，li吧，再结合界面设计图抽象出它们的共性，如border、padding、white-space、font-size等等，做全局处理。尽量的减少css代码量，例如如果全局的padding:0px;那么在某个具体的标签中就不要加上这个了。不重复的设计不仅代码量小，优雅整洁，而且另外的好处就是维护方便，应对变化轻松自如。
2.限制全局的势力，明确管理范围
第一条说的意思就是鼓励用全局解决每个class和标签的细节设计过于繁冗的问题，但这样真的就算优雅了吗？优雅的标准是什么？至少应该是没有“安全隐患”吧。何谓“安全隐患”，一次经历让我深感明确职责的重要性。全局一旦使用，它会对页面的相关所有标签起作用，这样做它的权利是不是太大了点呢。那次的经历就是一个发表文章的界面，用了一个可以生成各种样式和直接支持从word粘贴功能的编辑器（Fckeditor），而css里不乏p、span、div等全局样式定义。比如说p标签，设计人员的原意是用来做文章标题的样式的，用了绿色的大字体，结果编辑器生成的代码里面就含有p标签（直接从word贴过去的话，生成的垃圾样式超多），便出现了文章内容大段大段的绿色大字体的壮观场面。
显然只遵循第一条是远远不够的，全局有好处，但势力未免太大了点，结合起来的用当然最好。其实结合起来也很简单，如果你规定哪个区域的所有li用某个样式，你只需要用#区域id li{...}这样写就可以，区域之外的li丝毫不会收到影响。采用这种方式的原则是你明确知道区域内的所有可能出现的标签和其所附带的样式。做好每个区域后，若每个区域有共性，在将共性抽离出来作为全局。这样解决了“安全隐患”，便又优雅起来了。当然，想上面提到的编辑器所带来的灾难，根本原因就在于不知道编辑器会生成怎样的标签和样式的前提下，贸然的采用了全局，无形中扩大了全局的势力，让它“越权”管了违背本意的区域和标签。如果考虑本条原则，这个情况是可以避免的。
3.在设计中加入一点动态的业务逻辑思维
要求美工设计一段grid内嵌html代码的样式，发给我一看效果不错，可当我准备直接结合数据嵌入时，麻烦来了。怎么全是用id标识的样式啊，grid是啥意思啊，不就是在页面输出样式重复但内容不同的东西吗。用了id那岂不是我一页输出十条记录，这也页面将出现十个相同的id？那这是谁的错呢？开发人员说要一个酷酷的样式，你设计人员确实原原本本的做到了又酷又整洁。可当结合起来还是出现了问题，从程序员的角度来看待这个问题，我希望设计人员有一点动态的意识。类似的情况还包括设计人员应该在设计样式时把什么鼠标经过，鼠标点击等效果做齐了，内容编号的区域高度不要做死了（最好自适应就好了），内容超过时怎么处理等等。
4.跨分辨率与跨浏览器
这两点应该成为设计人员交工前必须的检查环节。跨分辨率意味著请尽量采用百分比来处理宽度。百分比的一个好处还在于当改变最外层元素的宽度时可以很轻松的适应这种变化，而不用对每个标签的width进行修改。跨分辨率还能识别那些依靠margin-left：**px;的“假居中”情况。跨浏览器是个累人的活，需要不断测试，涉及到很多css的应用技巧，在这里不一一罗列，这也不是一个开发人员开的事儿，只是必须作为硬性要求来规定。要特别注意各浏览器对padding等标签的解释差异，有时一些padding=1px，2px的情况，跨浏览器时出现差异，设计人员居然没看出来，等到搞开发的发现，确实有点郁闷。
5.更加友好的和开发人员耦合
做好前面那些，这个设计人员已经相当的出色了。但还可以更好。谈到和开发人员的耦合问题，这意味著开发人员完全不需要担心和读懂那些css，而只需要操纵和呈现数据，完成业务流程即可。以前有一个美工，和他合作就非常舒服，他会经常在设计好的页面上加入“这里放新闻，这里最多只能容纳50个字”等等提示，开发人员一看就懂得处理。可是那样的感觉从那之后我再也没有享受过。这算一种境界也算是开发人员的期望吧，呵呵。
我非美工（这里的美工指页面布局和样式设计）人员，上面所谈难免肤浅和业余，更多的代表Web前端开发人员的一点点心声吧，轻拍。
1.绝不重复，让你的css优雅起来
做布局设计，大局观很重要，需要抽象出来哪些是必须和多次使用的元素，一般div和ul，li吧，再结合界面设计图抽象出它们的共性，如border、padding、white-space、font-size等等，做全局处理。尽量的减少css代码量，例如如果全局的padding:0px;那么在某个具体的标签中就不要加上这个了。不重复的设计不仅代码量小，优雅整洁，而且另外的好处就是维护方便，应对变化轻松自如。
2.限制全局的势力，明确管理范围
第一条说的意思就是鼓励用全局解决每个class和标签的细节设计过于繁冗的问题，但这样真的就算优雅了吗？优雅的标准是什么？至少应该是没有“安全隐患”吧。何谓“安全隐患”，一次经历让我深感明确职责的重要性。全局一旦使用，它会对页面的相关所有标签起作用，这样做它的权利是不是太大了点呢。那次的经历就是一个发表文章的界面，用了一个可以生成各种样式和直接支持从word粘贴功能的编辑器（Fckeditor），而css里不乏p、span、div等全局样式定义。比如说p标签，设计人员的原意是用来做文章标题的样式的，用了绿色的大字体，结果编辑器生成的代码里面就含有p标签（直接从word贴过去的话，生成的垃圾样式超多），便出现了文章内容大段大段的绿色大字体的壮观场面。
显然只遵循第一条是远远不够的，全局有好处，但势力未免太大了点，结合起来的用当然最好。其实结合起来也很简单，如果你规定哪个区域的所有li用某个样式，你只需要用#区域id li{...}这样写就可以，区域之外的li丝毫不会收到影响。采用这种方式的原则是你明确知道区域内的所有可能出现的标签和其所附带的样式。做好每个区域后，若每个区域有共性，在将共性抽离出来作为全局。这样解决了“安全隐患”，便又优雅起来了。当然，想上面提到的编辑器所带来的灾难，根本原因就在于不知道编辑器会生成怎样的标签和样式的前提下，贸然的采用了全局，无形中扩大了全局的势力，让它“越权”管了违背本意的区域和标签。如果考虑本条原则，这个情况是可以避免的。
3.在设计中加入一点动态的业务逻辑思维
要求美工设计一段grid内嵌html代码的样式，发给我一看效果不错，可当我准备直接结合数据嵌入时，麻烦来了。怎么全是用id标识的样式啊，grid是啥意思啊，不就是在页面输出样式重复但内容不同的东西吗。用了id那岂不是我一页输出十条记录，这也页面将出现十个相同的id？那这是谁的错呢？开发人员说要一个酷酷的样式，你设计人员确实原原本本的做到了又酷又整洁。可当结合起来还是出现了问题，从程序员的角度来看待这个问题，我希望设计人员有一点动态的意识。类似的情况还包括设计人员应该在设计样式时把什么鼠标经过，鼠标点击等效果做齐了，内容编号的区域高度不要做死了（最好自适应就好了），内容超过时怎么处理等等。
4.跨分辨率与跨浏览器
这两点应该成为设计人员交工前必须的检查环节。跨分辨率意味著请尽量采用百分比来处理宽度。百分比的一个好处还在于当改变最外层元素的宽度时可以很轻松的适应这种变化，而不用对每个标签的width进行修改。跨分辨率还能识别那些依靠margin-left：**px;的“假居中”情况。跨浏览器是个累人的活，需要不断测试，涉及到很多css的应用技巧，在这里不一一罗列，这也不是一个开发人员开的事儿，只是必须作为硬性要求来规定。要特别注意各浏览器对padding等标签的解释差异，有时一些padding=1px，2px的情况，跨浏览器时出现差异，设计人员居然没看出来，等到搞开发的发现，确实有点郁闷。
5.更加友好的和开发人员耦合
做好前面那些，这个设计人员已经相当的出色了。但还可以更好。谈到和开发人员的耦合问题，这意味著开发人员完全不需要担心和读懂那些css，而只需要操纵和呈现数据，完成业务流程即可。以前有一个美工，和他合作就非常舒服，他会经常在设计好的页面上加入“这里放新闻，这里最多只能容纳50个字”等等提示，开发人员一看就懂得处理。可是那样的感觉从那之后我再也没有享受过。这算一种境界也算是开发人员的期望吧，呵呵。
我非美工（这里的美工指页面布局和样式设计）人员，上面所谈难免肤浅和业余，更多的代表Web前端开发人员的一点点心声吧，轻拍。
