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 正解
|