初入CSS，會被他豐富的屬性嚇到以為要玩記憶力大考驗，我曾經就把MDN的側欄屬性給他一個個看過(佩服自己的刻苦耐勞)，後來隔天就忘了。經過幾番無功、探索與混亂，找到自己看待這件事的方式，分享給腦容量爆炸的大家。

你可以把它想像成：收納整理、烹飪烘焙、DIY、任何你喜歡且具有一定規模活動。

所有的技藝，都需要有『收納整理』的系統，然後可檢索，『應用創造』，並不斷練習這個過程，探究到細節差異，直到『熟能生巧』。

遇到痛點

某次Code Review的時候，被問到更多細節，當機已久，這種尷尬局面，使我失去理智的開始把MDN的側欄屬性給他一個個看過，然後，越看越挫折，於是帶著困惑跟其他人討論，有人就這般刻苦耐勞，有人就沒這擔憂，遇到再說。後來找了幫我Code Review的前輩，他跟我說：

『要一組一組分類記，有脈絡的串起來』
『學習新事物，要從自己熟悉的面相切入』

於是...想到這些

分為工具（系統分類）、技術（操作流程）兩個面向。

說個做點心的故事

• 你吃過某的讓你念念不忘的點心，可惜老闆已經沒有賣了。
• 於是你上網查詢或這翻閱書籍查了『食譜』可能有很多，或者沒有。
  • if 有食譜或教學影片、剛好你朋友會做點心
    • 你試著看懂食譜，開始去弄懂那些『專有名詞』和『技術動作』，你試著採買並且動手模仿起來。
  • if 沒食譜情況下就用五感和常識觀察
    • 起初會猜出成分，有糖、有麵粉、有奶油。
      猜製程，需要混合、攪拌、揉壓、發酵、烘焙等。
• 接著你試了好幾次都做不出那個曾經的味道，你不斷的從入門到放棄，放棄後又入門，永不放棄!
  
  • 原來麵粉還有分高、中、低高筋，歐式、台式、日式麵粉。
  • 原來奶油還有分發酵程度和產地、製成、風味、油水比例。
  • 原來烤箱還有分炫風、電子、機械、水蒸等。
  • 原來烘焙還有分上、下烤溫，而烤箱會影響熱的傳導方式。
  • 原來烤幾分鐘後要換面烤，不然會烤焦或內部烤不熟。
  • 原來攪拌方式和順序也會影響，前後對換就會不同效果。
  • 原來成份比例，會造就不同口感和樣貌。
  • 原來要不要發酵，還是直接進烤箱也有差........等等。
• 終於你在哪裡調來調去，發現各種原來，找出了自己的要的比例。
• 接下來你打算做個屬於自己的巧克力口味，在這基礎上繼續做變化。
  • 你發現巧克力也分很多種，原來還有分％數、可可脂比例、產地風味
  • 可可粉，還有分防潮可可和黑可可、可可水滴、可可脂片...等
  • 你發現添加新東西，可能會改變原先的結構，例如：如果你直接運沖泡飲粉，因為食品添加劑太多，會導致不可預測的失敗，如：麵團起不來！
  • 於是你選了大家推薦的那些牌子開始做測試，一次做了好幾個不同比例、品牌的，然後評測你喜歡哪個。
  • 好了我不繼續說下去了ＸＤ

於是你的腦袋多了好多『知識』和實作『經驗』，我覺得自己在學習切版的時候，就很像這樣，其實跟學習許多生活技能很類似，只是更深入，更抽象，更具規模細節。

打造你的切版工具箱

工具，系統分類

• 觀察哪些會變化並做個大分類，以下都可以想像成『某工具』
• 例如：
  • 規則，繼承、比大小（權重）、父與子層
  • 文字，會變大小，變樣子，變顏色....
  • 背景，很多種顏色，漸層，透明，圖片...
  • 框線，圓弧，多邊形，某一角凹起來....
  • 排版，垂直、平行、漂浮....
  • 位置，置中、對齊、分兩邊、貼邊....
  • 流向，nomal flow 、out of flow...
  • 單位，絕對、相對、比例....
• 多少會用過繪圖軟體吧(ex:小畫家)
• 現在是更進階更原始的小畫家版本
• 一組組的記他們，分類之中，還會出現更細部的分類。
• 可以參考相關書籍目錄分類方式
• 記重點就好，釐清脈絡即可
  

技術，操作流程

• 用過的你就更熟悉，會出現『語感』和『手感』。
• 操作流程，記錄下來，熟能生巧
• 我覺得這很吃對畫面的敏感度，但耐心細心是無敵的夥伴。
• 有個叫官方規範的武林秘笈，關於看規範這回事，會再另外文章分享。
• 先做個小作品，然後再慢慢的變複雜，你的經驗和工具就會越來越多！
• 過一陣子後，細節會有點忘記會需要點時間回憶很正常，可以透過以下方式協助未來的自己：
  • 做筆記。
  • 推演，下關鍵字
  • 曾經的作品，作為自己的資料庫，喚醒回憶
  • 觀摩他人作品（Ex:Codepen有很多範例）