切页面和做模板（mustache）过程示例

作为前端工程师，切页面、做模板，是常见的工作过程。

切页面，主要是和设计师打交道，要过他那一关；

设计师能在线查看页面效果；
什么时候都可以看到；当然这个文件也是一直要维护的；
这个页面内容应该是比较丰满的，以充分体现其设计思想，设计美感；
这个文件是发布出去的；
不论生产系统还是测试系统；
测试工程师也能透过这个页面了解页面需求的实现程度；

做模板，是将已经做好的页面进行拆分；假如拆分为两个文件，一个为容器，另一个是被 include 文件。
我们现在命名一个是 .ssi.html 文件，一个是 .mus.html 文件。
ssi 文件引用 php 来处理 mus 文件。
未来应当生成静态文件；

one-detail 为 basename；
ssi 和 mus 命名规则是一致的，具有美感；
.ssi.html 和 .mus.html 是为了编辑器的语法着色方便而增加 .html 后缀的。
ssi 文件引用 php 渲染 mus 文件；
示例：``
tpl 参数不必携带 .mus.html 这个后缀；
若采用静态文件方案，则链接为：
/cms/maintenance/one-detail/536.html，536为id；
/img/cms/maintenance/one-detail/536-featured-img.jpg；

切页面主要和视觉设计师打交道，切的好不好，其实要和设计师密切沟通。

有时设计师会时不时调整一下字号、间距、动画这些细节，一个像素都不要差，力争百分百复原设计稿。

我们知道，设计稿和页面毕竟是两个呈现系统，你使用 PS、AI 、Sketch 设计出来的东西，在浏览器上呈现出来的效果肯定是有细微差别的。

你看到的情况往往是这样的：

在这个过程中，我们可能会想既然肯定要调整，在第2步不需要百分百复原设计稿？

答案是：不一定。

如果你和设计师不仅有充分的信任，更有一致的审美观，一致的目光如炬的火眼金睛，那么在 技术上 是不需要百分百复原的（比如像素个数、色数等硬指标），因为你们在呈现效果上是百分百复原了（几乎不可能，因为每个人的显示器、浏览器肯定不一样）。

作为技术控，页面工程师应当做到丝毫不差，这叫 有理想，是必须要追求的；也应当学会协商、妥协，建立其充分的信任，获得充分的尊重，这叫 有包容；

我觉得我们既能做到有理想，又能做到有包容，因为我已经看到这样的情况在发生了。