修行習作｜Pixel perfect kata 學習筆記

2023/07/19 更新2023/07/18 發佈閱讀 8 分鐘

第一週－ 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: () 括號先打出來，這樣就可以比較清楚打完一個小組後，接續有另一個同層級的容器要撰寫，如下圖：