CSS 習作｜初學 CSS 必經的犯錯道路
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
▍🎥 CSS 選擇器效能優化建議，影音筆記：
洧杰老師分享在 iT 邦幫忙的「CSS 階層效能優化建議」文章，
裡面摘要了影片的重點：
- 不同寫法的差異，例：
.wrap .header .menu ul li a與.menu a - 瀏覽器解析網頁的過程：DOM 與 CSSOM 的效能配對
- Google 建議的優化方式
- 不同選擇器之間的效能數據
01 - 瀏覽器如何解析網頁？
對瀏覽器而言，第一步會將 DOM 樹狀結構和 CSSOM 樹狀結構合併成「轉譯樹狀結構」，讓這個結構不僅包含網頁上所有可見的 DOM 內容，同時也包含各個節點的 CSSOM 樣式資訊。
文獻閱讀：Render-tree Construction, Layout, and Paint
圖片來源
02 - 瀏覽器解析 HTML、CSS 的過程：
瀏覽器在解析 HTML、CSS 後會產出「DOM」和「CSSOM」，並且將 DOM 和 CSSOM 進行匹配，進而產出 Style，而後將網頁的畫布排版 Layout 架構出來，接著繪製畫面 Painting，將流程繪製如下圖：
瀏覽器解析 HTML、CSS 過程
流程順序：
- 處理 HTML 標記並構建 DOM 樹。
- 處理 CSS 標記並構建 CSSOM 樹。
- 將 DOM 和 CSSOM 組合成渲染樹。
- 在渲染樹上運行佈局以計算每個節點的幾何形狀。
- 將各個節點繪製到屏幕上。
因此若我們的階層複雜，則會在「DOM、CSSOM 匹配階段」影響效能。
03 -Google 建議的效能優化方式
文獻閱讀：Reduce the scope and complexity of style calculations
- 減少樣式計算的範圍與複雜性
- 降低您的選取器複雜性
- 降低樣式化的元素數目
- 測量您的樣式重新計算成本
- 使用區塊、元素、修改器
▍🎥 如何提升 CSS Class 可讀性，影音筆記：
有發現到，從過去到未來，class 有慢慢越變越多的趨勢，class 變多代表他的靈活性變多了，但 class 變多的情況下，也會隨之有一些缺點。
當一個 HTML 標籤上的 class 過多時，且當我們不能減少 class 數量時，可以透過 class 的擺放順序來增加可讀性，以下面程式碼為例，可以看到 <div> 有很多不同的 class 命名，而每個命名都有不同的作用，如用來推擠內外距的「mb3」、「pt-3」，以及語意名稱「header」和格線系統「col-4」。
<!-- 沒有排序的方式 -->
<div class"mb3 header col-4 pt-3">
當 class 繼續累加更多時，會使可讀性越來越不好，因此我們可以從一開始便有意識的排序 class。
依循下列順序來優化：
- 先擺放：語意、容器（格線系統）、元件
（ 注意：元件和容器通常不會放在一起 ） - 再擺放：樣式調整（文字顏色）
- 最後放：utilities（padding、margin）、微調的東西
<!-- 有排序的方式 -->
<div class"header container bg-dark mb3 pt-3">
或是專放 utilities 的元素：
<div class="px-6 pt-4 pb-2">
▍🎥 CSS Class 不要用方向、編號式命名
洧杰老師分享在 iT 邦幫忙的「由淺入深的 CSS 命名規則」文章。
01 - 方向式命名使「響應式狀態下不符語意」
如下圖，初學時會以下列的 .left、.right 去為區塊命名：
但是這樣的命名方式會使可讀性較差，且當畫面大小為手機或 RWD 伸縮時，版面會變成一欄，也就沒有所謂的「左右，.left、.right 之分了」，且也不符合語意了。
因此不建議以方向式「左右上下」來命名，例如：.footer-top、.bottom 。
02 - 初學時，以語意式命名取代編號式命名
另一方面，也不適合以編號來命名，例：「.box1、.box2、.box7....」等，這樣的命名方式在閱讀上較無法一目瞭然知道內容是什麼（且當與他人協作時，也會增加協作負擔），且當專案歷經時間洗滌，再回過頭來看時，也可能對當時的 .box1、.box9 分別是什麼內容忘得一乾二凈了。
因此，建議在新手的練習階段，至少要以語意式命名，例如：「.header、.menu」，讓人理解該區塊的內容。
03 - 學習過程中，命名時會歷經的幾個學習階段：
- 第一階段：一開始會以方向性命名，例
.left、.right等。 - 第二階段：語意命名方式，例
.header、.cartList、.item、.menu - 第三階段：元件式命名，以 Bootstrap 為例，卡片命名為
.card，Bootstrap 依照外觀樣子來設計元件名稱，這樣的命名方式使元件套用於任何地方都不會與畫面位置、檔案頁面有衝突，可抽換靈活使用。
以一顆按鈕來舉例：
若命名為首頁按鈕.index-btn，放置於首頁內容時並無怪異之處。
但若套用於其他頁面，放在會員頁面裡時，則 class 名稱就會產生檔案檔名、畫面的邏輯衝突。
▍🎥 從 CSS 標題設計判斷前端水平
洧杰老師分享在 iT 邦幫忙的「從 CSS 標題設計判斷前端水平」文章。
01 - 避免直接在標籤選取器定義樣式
以 h2 為例，初學時會對標籤選取器直接下樣式設計，以下為例：
h2{ font-size: 36px;}
然而這樣的做法會使全部的 h2 都吃到相同的樣式設定。
但若 h2 會在許多不同區塊、頁面重複使用，且樣式需求也不一樣的情境下，這樣的作法會使 h2 樣式難以覆蓋。
02 - 避免非必要性的階層依賴關係
接續上面，以 h2{ font-size: 36px;} 為例，當 h2 會在許多不同區塊、頁面上重複使用時，我們可能會使用以下方式：
h2{ font-size: 36px;}
.profile h2{ font-size: 24px; }
.education h2{ font-size: 24px; }
.about h2{ font-size: 24px; }
或是運用以下方式：
h2{ font-size: 36px;}
.profile h2, .education h2, .about h2{ font-size: 24px; }
然而這些作法會出現越來越多一樣的語法，且當頁面有 50 頁、100 頁時，將會使程式碼堆疊肥厚，維護困難。
▍小結
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
你可能也想看
