修行習作｜Pixel perfect kata 學習筆記
第一週 － Pixel perfect kata 挑戰
1px 都不差練習
第一次拿到設計稿時，過程中花費很多時間來理解容器與元素之間的關係，以及彼此的特性如何相互影響，又如果設置了 CSS 將造成什麼變化，並且在命名上也花費不少精神，無論畫面有多簡單，剛開始切版製作往往要耗費 1 ~ 2 天的時間來拆解、理解設計畫面，比起畫出方形容器圖案，用下圖這種方式來寫出畫面結構，使我較能知道如何開始第一步。
奇妙架構圖
有時候只利用架構圖來理解畫面會出錯，因此需要搭配圖畫的方式來確保切版結構正確，如下圖，將畫面框架繪製出來，並且搭配架構圖的方式寫下結構（利用紙筆或電腦繪圖）：
奇妙架構圖 + 圖畫輔助
巢狀結構
問題與卡住的狀況尤其發生在當設計稿有 巢狀結構 時，會在寫畫完結構+圖畫後，在開始切版過程中才發現自己的結構理解錯誤，因此停止切版，又回過頭來重新在紙上釐清畫面結構，通常會反覆 4 ~ 5 遍。（ 而且無法聽音樂或是環境吵雜，影響思考😮💨 ）
奇妙架構圖 + 圖畫輔助
當 <ul> 裡的 <li> 包覆了不同類型元素（例如：<h2>、<a>、<img>、<p>），且是 flex 底下再包覆 flex 時，就會需要反覆寫出結構、寫畫來理解如何規劃 HTML，目的是要透徹瞭解容器與容器，容器與元素之間關聯與相互影響脈絡。
省視學習脈絡
- 對於容器與元素的使用觀念尚不理解
- 對於父層容器、子層容器、巢狀容器之間的關係尚不熟悉
- 需要加強架構化與系統、模組化思考方式
- 熟悉並且理解每個 tag 的意義與特性
- 系統化、語意化 HTML 結構
- 理解 CSS 選擇器的使用方式與時機
- 認識 CSS 優化方式與善用類別選擇器
我也發現，如果上述所列無法理解，很難進到使用 emmet 來撰寫 HTML 架構，因為大腦對於這些知識應用仍在處理、釐清、轉化中。
我是屬於如果不理解所有運作原理、彼此之間的邏輯關聯，大腦的知識網就會破掉而中斷的類型，進而學習卡關，看不懂的東西就是怎樣都看不懂，跟理解數學一樣。
挑戰過程
第一週 － pixel perfect kata 挑戰設計稿
剛開始的撰寫習慣
先寫 HTML 結構，後寫 CSS ，發現自己比較喜歡把 HTML 畫面都部署好後，再開始寫 CSS，但是當畫面為巢狀結構時，會拆分區塊來做，例如拆成<header>、<main>、<footer>，或更細的區塊。
觀摩同學的練習過程後，發現自己沒有善用類別選擇器，共通設定等等。
不通透的部分
- 對於
<ul>的使用時機、規範觀念不清楚，導致在寫的時候陷於混亂 <a>的emmet 應用方式不熟練a[href="www.google.com"]{Google}
- 對於
<ul>底下的巢狀<li>結構理解反應慢 - 常用、複製性的內容不會使用 emmet 語法加速效率
- 語意化命名花費時間思考
- 英打速度、正確性緩慢，鍵盤打字尚不熟練
- 初使用 VS Code 來製作，尚不熟悉環境的搭建
- 一直記不住
img的 emmet （打屁股）img[src="www.google.com" alt="img"]<img src="www.google.com" alt="img">
練習理解
寫出 HTML 的架構 ，嘗試加上更多類別選擇器：
.container>main.d-flex>(ul.news>li.news-list.d-flex.mr-20.mb-24*2>(a>img.mr-20)+div.news-info>(h2.title{Title Lorem..}+p{lorem15}))+(div.banner>(a>img))^footer.footer>p{...}
上面的 emmet 內容，再次拿出我的 奇妙架構圖 來理解：
emmet 奇妙架構圖
嘗試理解 emmet 語法邏輯與使用方法：
寫下操作流程
我想嘗試紀錄自己的行為流程來加深印象，也同時觀摩自己和其他同學的作法。
前置作業
- 閱讀設計稿，規劃並確立 HTML 結構，找出共通類別樣式
- 初步進行語意化命名，讓標籤可讀性佳
- 建立專案資料夾，建立 kata.html、style.css、cssreset.css 檔案
開始撰寫
- HTML 的部分
- ! emmet 建立環境，載入 cssreset.css、style.css 檔案
- 編輯網頁標題
<title>...</title> - 開始於
<body>撰寫 HTML 結構，使用 emmet 來開發 - 放上圖片網址、圖片名稱、
<a>連結內容、輸入<p>段落內文
- CSS 的部分
- box-sizing: border-box
- 在 <body> 完成有繼承性的共通設定，例：
line-hight、font-size img設置vertical-align: middle;a設置display: block;.container最父層容器設定width: 640px、magin: 0 auto;- 撰寫共通設定，
.mr-20、.mb-24、.d-flex - 完成剩餘 CSS 內容
- 網頁開發者工具檢查內容與寬高是否吻合
犯錯與卡關
中間一度不管怎麼切，高度都不是 360px，跟中邪一樣 😱.... 卡了 3 天（傻眼）
檢查該放的都有放：
✓ css reset 放了
✓ <img> 消除奇妙的空隙
✓ <a> 標籤 display block
✓ 檢查文字段落的樣式，字級、行高
✓ <p> 確認行數為 3 行
CSS 的 <body> 明明放置了 line-height: 1.5，但是用開發工具檢查時，<body> 的 line-height 卻是「1」。
為了除錯也把相同的程式碼丟到 codepen 檢查，卻發現貼過去的程式碼所產出的內容高度竟然跟 VS Code 裡的高度不一樣，因此猜想是不是兩邊的 CSS reset 不一樣，但回過頭想又覺得不對....陷入魔性卡關時，忽然發現一件事...!!!!
CSS 權重
在我所載入的 CSS 文件中，「cssreset.css」這支檔案是放在「style.css」後面！！（如下圖）
因為權重的關係，後面大於前面，因此 cssreset.css 裡的設定蓋到 style.css 上！
加強權重認知
和 Codepen 不一樣，Codepen 會把基本環境建置好，但是若使用 VS Code，環境必須自己建立好，因此疏漏了CSS 檔案先後的權重問題！也因為是第一次使用 VS Code 來開發，所以過往沒有意識到載入檔案的權重問題。
把檔案上下對調後，畫面運作正常，完成「寬 640px*高 360px」任務！
權重影片學習
把之前看過的學習影片再次補上來，釘進大腦裡：
伸縮自如的 RWD 排版術(上) 40:00 老師說到 css 檔案先後的權重
老師示範 css 檔案權重
老師說明選擇器的權重
同時閱讀了金魚都能懂的 CSS 選取器第一章節，覺得幫助很大。
金魚都能懂的 CSS 選取器
優化撰寫方式
用 emmet 寫 HTML 結構時，常常寫到不知道自己身在何處，一旦斷了 0.01 秒思緒就會開始莫名錯亂，然後就不知道自己在寫什麼，此時就必須刪掉原本寫的程式碼重頭再來。
但是重頭再一次也不見得改善，重複的狀況一樣會發生，為此在練習 5 遍以後，發現在撰寫時，可以把最父層容器寫出來後，將接下來要使用的 Grouping: () 括號先打出來，這樣就可以比較清楚打完一個小組後，接續有另一個同層級的容器要撰寫，如下圖：
不熟練的 emmet
總是會忘記的地方：
img和footer要寫 class- 花括弧
{}的文字內容要記得寫 vam是vertical-align: middle;bxz是box-sizing:border-box;link:cssp48-0是padding: 48px 0;
總是會打錯的地方
我是誰我在哪
結語
練習練習練習練習練習練習練習練習...
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
你可能也想看
