2023-07-18|閱讀時間 ‧ 約 9 分鐘

修行習作｜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:css
p48-0 是 padding: 48px 0;

總是會打錯的地方

我是誰我在哪

結語

練習練習練習練習練習練習練習練習...

Practice make perfect，我是正在自我習作中的 Draw，我們下篇見 🙇🏻

分享至

成為作者繼續創作的動力吧！

Draw.com

追蹤

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

第一週－ Pixel perfect kata 挑戰

1px 都不差練習

巢狀結構

省視學習脈絡

挑戰過程

剛開始的撰寫習慣

不通透的部分

練習理解

寫下操作流程

犯錯與卡關

CSS 權重

加強權重認知

權重影片學習

優化撰寫方式

不熟練的 emmet

總是會打錯的地方

結語

學習如何學習的其他內容

你可能也想看

發表回應

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

第一週 － Pixel perfect kata 挑戰

1px 都不差練習

巢狀結構

省視學習脈絡

挑戰過程

剛開始的撰寫習慣

不通透的部分

練習理解

寫下操作流程

犯錯與卡關

CSS 權重

加強權重認知

權重影片學習

優化撰寫方式

不熟練的 emmet

總是會打錯的地方

結語

學習如何學習 的其他內容

你可能也想看

發表回應

第一週－ Pixel perfect kata 挑戰

學習如何學習的其他內容