DAY29 - 切版的学习历程与方向

今天就我自己的经验跟大家分享一下，
培养切版技能的方向～

第一阶段：练习什麽静态版面都要可以切出来

1. 基本的CSS原理一定要懂

CSS有很多，有些更是使用率高达99.99％的CSS，
这边挑出2个我自己觉得一定要懂的CSS原理的CSS样式

position

fixed, relative, absolute, static，之间的差别是什麽？
absolute会以哪里为定位？
static 跟 relative的差异在哪里？

display

inline, inline-block, block, flex，之间的差异是什麽
什麽时机点适合用哪一个

以上这两个css可以控制主要的定位排版，不只要知道单一个的功能可以做到什麽，
也要知道彼此之间的差异，这样才能根据原理选择适合的属性

2. 练习看着图就能分出HTML结构

HTML结构的分法也是切版里很重要的一环，
如果你不是很确定怎麽分，可以先画在纸上大概想一下，再正式撰写，试试看方法是否可行

3. 理解简单的js概念

一个网页里面全部都是静态画面几乎是不可能的，切版的你也要懂一些基本的
js，eg. 点击後，加上class颜色改变 这种简单的触发事件，要大概知道要怎麽下手

4. 可以试着用scss写css

这里建议scss而不是sass的原因是因为scss code可以与css code直接相容，
因此你把scss写成css也是完全没有问题的，进入门槛较低。
从中也可以慢慢练习scss的特型，如变数、mixin等等，慢慢理解scss的优点及怎麽使用

第二阶段：练习用别人的套件加深概念

1. 了解Bootstap的概念

Bootstrap就是一个UI的框架，经过很多代的演进，很适合当作切版的Guideline参考，
不一定要全部照抄使用，但可以了解他的概念之後，用在自己的切版专案上

2. 试着使用Bootstrap的动态元件

一开始我们可以先使用bootstrap的动态元件，eg. modal, popup，
了解别人的效果套件怎麽做，之後真的要做的时候也比较会有概念

第三阶段：切版整体架构及Reuse的思考

SCSS的结构

1. scss 的如同前面说的 Sass 7-1 Pattern、SMACSS，都可以有结构的分类你的scss
2. scss 档案的切割好坏，也会让影响後续在reuse同一个切版元件的难易度

怎麽做可以更大化的Reuse？

每次切版都要重切吗？很多类似的版为什麽每次都要重切呢？想想看怎麽样要怎麽做才能让你的版型可以从这个案子带到下一个案子

第四阶段：关於切版的其他技能

当你觉得你的切版越来越熟悉了，其他的切版技术类型也可以注意研究
PostCss, Storybook 等等与，切版相关的技术，
都可以帮助你的切版达到另一个层次

不分阶段：了解设计与串接资料的需求、限制与概念

切版是一个衔接设计图稿与资料串接的中间人，所以不是傻傻的一直切版就好，
必须不断的了解上下游的需求及限制，适时的给予建议，才能共创大家都好做的网页版型ＸＤ

最後，最好的学习方式就是实战，透过不断的实战练习，会遇到很多不同的议题，
渐渐的就会不断的成长了，很大家一样，我也还在需要更多努力的道路上～～～～