各位前端在拿到设计稿后的“作业”流程是怎样的？

[un]

是直接开始敲 HTML & CSS 还是做什么准备？
我发现自己现在的效率比较低，设计转化成页面的时候修改频繁。想了解下大家有没有好的“工作流”。

[RoshanWu]

无非就是写一些脚本让把一些重复的劳动交给机器做咯，用到的工具推荐有：Grunt, Gulp, Broccoli.
另外，小众一点的有（我指的是前端）：Rake, Make, Applescript 等等。
楼主可以看看 Github 一些比较优秀的项目，学习学习人家是如何组织代码如何优化流畅的。

[RoshanWu]

优化流程，什么破输入法，呸。

[Tonni]

拿到设计稿，把产品经理、美工全部叫过来问“就这样，不改了？”，得到他们肯定的答复后，拿出事先准备好的合同，签字、按手印。

[perrywky]

@Tonni 哈哈，点个赞！

[un]

@RoshanWu 其实我想了解的不是使用工具自动化预编译、minify 这些。而是在开始敲代码之前做的工作，比如把设计稿中的配色抽出来、把一些元素抽象成模块、抽出主要的内外边距等。

[un]

@Tonni XD

[kokdemo]

告诉他们“效果就这样了，谁要改，砍死他！”

[RoshanWu]

@un 哦，你指的是这个啊，我的经验是： https://github.com/roshanca/kh-demo-web/tree/master/source/_sass

[tushiner]

@Tonni 我都是开着玩笑说“谁要改，死全家”，然后严肃的补充一句“我不是开玩笑的”。。。

[bsbgong]

我不是专业前端，目前兼做着。
修改频繁是经验不够，不断总结就好了。
一般是先分析是否有可分离的公共template，比如下拉框，弹出框，列表等等。
然后就是正常的html/css。
CSS是在实践中无限学习的，不断更新你的知识，优化你的思路。

[P233]

0 我用 Sass
1 根据 PSD 创建常用的 颜色，字体 等变量
2 分析可复用的样式，比如 title， button，input，ul 等，创建 %placeholder, @mixin，或者直接 class ，（这些样式一般不包含 width height 等）
3 拆分页面结构，创建相应的文件，比如 header.sass footer.sass sidebar.sass 等，也会创建对应页面的 sass 文件
4 创建插件需要的样式文件，比如 datepicker.sass

我都是先写 CSS 再写 HTML， 因为 CSS 修改方便，HTML 改来改去就很花时间了

[edward1992]

@P233 用sass的话，你应该是在ror的框架下开发前端吧？还是说，sass现在ror以外的开发流程里也能用？

[P233]

@edward1992 Sass 只是提供了更便利的 CSS 书写模式，可以用在任何项目中，毕竟我们需要的只是编译后的 CSS

[Tankpt]

@Tonni 黑的好厉害。不过好赞

[spark]

无非就是把可复用的部分分离出来, 如果用 Sass 就分离 partial, 以后用到就不用重复劳动了。

推荐几个工具:

* Yeoman (推荐用 gulp 代替 grunt)
* Compass
* Slicy
* ImageOptim
* NameChanger

[Biwood]

@P233 先写CSS在写HTML，这样也行吗，无法想象

[mcfog]

http://alloyteam.github.io/AlloyDesigner/

大路货就不重复了，推荐个小众的工具，可以把设计稿半透明然后铺到半成品页面上

[JamieSoung]

@Tonni 不得不赞...

[JamieSoung]

@mcfog 这是像素级还原...

[skyshy]

直接开始敲？开什么国际玩笑 。（哼！设计师已经有点儿不想理你了。）

难道就不分析，想一想？总之还得要对整体能有大体把握，对时间和技术有所预期。
当然还有很多要做事情的，包括前端规范文档，前端用到的框架，前端兼容性级别，前端项目的部署等等，很多都是经验积累，有些在过程中也要做的。

过程中也可能遇到这样那样的问题：

1.技术瓶颈：及时提出，大家一起探讨。有可能是自身技术限制，也可能目前环境下技术不能实现。好学是一种本能，但不要做所谓纯粹的伸手党。

2.需求变更：明明做得很完美了，可是需求变了，你又得重新来。那么你得反思一下自己，编写的扩展性好不好，模块化合不合理……另一方面，需要不断和产品经理、设计等沟通，多从他们那里获取更多的可用信息，同时要大胆说出自己的想法。不要以为一直忙着编写效率就高，想法很重要，也许你白活了一天，人家三下五除二立马就给你解决了。
……

还有很多事情，不想说那么多了，因为已经很乱了。总之这是一个学习和积累的过程，记录笔记，不断的总结和思考，站在巨人的肩膀上，像上帝一样地思考。

后来，你会发现自己做起来越来得心应手，胸有成竹。

设计师都等着被勾搭一下，真是没情趣的孩子，至少问一下有没有男/女朋友，唉。

不喜勿喷，就酱，有人喊我睡觉了