这是一个创建于 3780 天前的主题，其中的信息可能已经有所发展或是发生改变。
是直接开始敲 HTML & CSS 还是做什么准备？
我发现自己现在的效率比较低，设计转化成页面的时候修改频繁。想了解下大家有没有好的“工作流”。
我发现自己现在的效率比较低，设计转化成页面的时候修改频繁。想了解下大家有没有好的“工作流”。
 |
1
RoshanWu 2014-08-18 15:01:03 +08:00  1
无非就是写一些脚本让把一些重复的劳动交给机器做咯，用到的工具推荐有：Grunt, Gulp, Broccoli.
另外，小众一点的有（我指的是前端）：Rake, Make, Applescript 等等。 楼主可以看看 Github 一些比较优秀的项目，学习学习人家是如何组织代码如何优化流畅的。 |
|
2
RoshanWu 2014-08-18 15:01:41 +08:00
优化流程，什么破输入法，呸。
|
 |
3
Tonni 2014-08-18 15:11:42 +08:00 7
拿到设计稿，把产品经理、美工全部叫过来问“就这样，不改了？”，得到他们肯定的答复后，拿出事先准备好的合同，签字、按手印。
|
 |
5
un OP @RoshanWu 其实我想了解的不是使用工具自动化预编译、minify 这些。而是在开始敲代码之前做的工作，比如把设计稿中的配色抽出来、把一些元素抽象成模块、抽出主要的内外边距等。
|
 |
7
kokdemo 2014-08-18 15:17:24 +08:00
告诉他们“效果就这样了，谁要改，砍死他！”
|
|
8
RoshanWu 2014-08-18 16:00:47 +08:00
@un 哦，你指的是这个啊，我的经验是： https://github.com/roshanca/kh-demo-web/tree/master/source/_sass
|
 |
10
bsbgong 2014-08-18 16:20:37 +08:00
我不是专业前端，目前兼做着。
修改频繁是经验不够，不断总结就好了。 一般是先分析是否有可分离的公共template，比如下拉框，弹出框，列表等等。 然后就是正常的html/css。 CSS是在实践中无限学习的，不断更新你的知识，优化你的思路。 |
 |
11
P233 2014-08-18 16:31:21 +08:00 3
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 改来改去就很花时间了 |
 |
12
edward1992 2014-08-18 17:06:54 +08:00
@P233 用sass的话，你应该是在ror的框架下开发前端吧？还是说，sass现在ror以外的开发流程里也能用？
|
|
13
P233 2014-08-18 17:21:29 +08:00
@edward1992 Sass 只是提供了更便利的 CSS 书写模式，可以用在任何项目中，毕竟我们需要的只是编译后的 CSS
|
 |
15
spark 2014-08-18 18:41:03 +08:00 via iPhone 1
无非就是把可复用的部分分离出来, 如果用 Sass 就分离 partial, 以后用到就不用重复劳动了。
推荐几个工具: * Yeoman (推荐用 gulp 代替 grunt) * Compass * Slicy * ImageOptim * NameChanger |
 |
17
mcfog 2014-08-18 20:51:46 +08:00 1
|
 |
18
JamieSoung 2014-08-18 22:01:55 +08:00
@Tonni 不得不赞...
|
|
19
JamieSoung 2014-08-18 22:02:23 +08:00
@mcfog 这是像素级还原...
|
 |
20
skyshy 2014-08-18 23:08:46 +08:00 1
直接开始敲？开什么国际玩笑 。（哼！设计师已经有点儿不想理你了。）
难道就不分析，想一想？总之还得要对整体能有大体把握，对时间和技术有所预期。 当然还有很多要做事情的，包括前端规范文档，前端用到的框架，前端兼容性级别，前端项目的部署等等，很多都是经验积累，有些在过程中也要做的。 过程中也可能遇到这样那样的问题： 1.技术瓶颈：及时提出，大家一起探讨。有可能是自身技术限制，也可能目前环境下技术不能实现。好学是一种本能，但不要做所谓纯粹的伸手党。 2.需求变更：明明做得很完美了，可是需求变了，你又得重新来。那么你得反思一下自己，编写的扩展性好不好，模块化合不合理……另一方面，需要不断和产品经理、设计等沟通，多从他们那里获取更多的可用信息，同时要大胆说出自己的想法。不要以为一直忙着编写效率就高，想法很重要，也许你白活了一天，人家三下五除二立马就给你解决了。 …… 还有很多事情，不想说那么多了，因为已经很乱了。总之这是一个学习和积累的过程，记录笔记，不断的总结和思考，站在巨人的肩膀上，像上帝一样地思考。 后来，你会发现自己做起来越来得心应手，胸有成竹。 设计师都等着被勾搭一下，真是没情趣的孩子，至少问一下有没有男/女朋友，唉。 不喜勿喷，就酱，有人喊我睡觉了 |
 |
21
O21 2014-08-18 23:10:20 +08:00
我看你见头像。。我以为我好被盗了。。怎么自动发帖了
|
|
24
un OP @skyshy 感谢已送。我这样的提问确实做了伸手党。你提到的问题我多少有考虑到，但还没有深入的去想，或许我应该自己先做些总结。
|
|
25
un OP @skyshy 又看了遍。“设计师都等着被勾搭一下，真是没情趣的孩子，至少问一下有没有男/女朋友” 意思是搭讪设计妹子也是流程的一部分么 - -)。get√
|
|
26
P233 2014-08-19 02:21:50 +08:00
@Biwood Sass 提供了很多便利
比如 #header > #header-logo + #header-menu 这个结构 Sass 可以这样写 #header &-logo &-menu 这样就能体现出 HTML 的结构了 |
 |
27
hkongm 2014-08-19 10:11:16 +08:00
yeoman+gulp
|
 |
28
angusjune 2014-08-19 10:30:46 +08:00
Adobe的project parfait
https://projectparfait.adobe.com/ 作用如同它的Slogan："Extract everything you need from PSD comps - in your browser" 可以直接获取psd中的css 导出特定图层为图片 等等 不过我觉得仅仅适合作为辅助功能 比如说快速取色啊 快速导图啊（不用去切片了） 快速获取绝对位置啊 之类的 连接速度有点慢 而且对于比较大的psd比较无能 |
 |
29
adspe 2014-08-19 11:13:31 +08:00
嫌烦的话CSS可以用个CSS Hat
SASS可以用Nesting |
 |
31
RaymondYip 2014-08-20 16:30:11 +08:00
@Tonni 正解
|
Select Language