細節注意

• class 複用性
• class 名稱順序，先放自訂 class 名稱再放共用 class 名稱。
• 不可寫死容器高
• 圖片要設 display:block;

設計稿流程規劃

開版

設計稿中區分為兩大區塊：滿版 ( .container-fluid ) 、1200px ( .container )

複用性 class

• 設計稿中會使用到的內距外距統整到 Utilities 內。
• 標題分 .mainTitle 、.title ：『 個人資料、學歷、技能、工作經驗、聯絡方式 』 中 font-size、line-height、內距、外距 皆相同，但『 技能與聯絡方式』 文字顏色與英文副標顏色不同，所以分別設定兩個標題 class 。
• 設計稿中大部分 ul > li 樣式相同，所以設定 .list-group、.list-group-item 做複用。 技能與聯絡方式的 ul > li 樣式不同則各別設定。
  • 每個 li 結尾 padding-bottom 都為 0 ，寫一個 .list-group-itemPb0 做複用。本來想要使用 li:laster-child ，但看到洧杰老師 CSS 階層效能優化建議 文章，決定降低選取器的複雜性，使用一個類別方式命名。
• border ： 設計稿中設計了共用的 ul > li 樣式，所以另外客製左側線，方便複用。

小劇場回顧

第一週切版嘗試使用 " emmet 熱鍵 + Wrapping individual lines 技巧 " 開發。

邊回想熱鍵邊一根手指一根手指的按著鍵盤，

讓我想起以前去上電腦課回家練習打字的我媽媽，哈哈哈 XD

.

開始切版前，先統整了設計稿架構，避免寫到後面不知道自己在寫甚麼鬼，然後發芬瘋掉。

為了增加複用性，尋尋覓覓找出相同的樣式變成可複用的 class ，但不夠熟練總有漏網之魚 ( 例如最後一個 li 的 padding-bottom:0; 這種小細節 XD )，就這樣來回調整了一些時間，也是滿疑惑複用的 class 是否正確，希望再練習幾週能抓到些精隨。

另外發覺自以為飛快的敲著鍵盤時，其實常常打錯字，按到隔壁按鍵，於是加入 " 洧杰老師訓練菜單 " 中的英打練習，把常用的程式碼片段加到 keybr.com 上，每天花 5 ~ 10 分鐘練習手感。

資料來源

六角學院 ： 第一週 – 個人履歷

六角學院 ：emmet 熱鍵中文表、VS Code 編輯器熱鍵。