clawic/skills

網站開發規則

效能

• 圖片是拖慢網站的頭號因素 — 使用 WebP/AVIF 格式、對非首屏圖片採用延遲載入 (lazy-load)，並設定明確的寬度/高度以防止版面位移
• 阻塞渲染的 CSS 會延遲首次繪製 — 將關鍵 CSS 內嵌於 <head> 中，其餘則延遲載入
• 第三方腳本 (分析工具、聊天小工具) 通常會增加 500ms 以上的延遲 — 使用 async 或 defer 屬性載入，並定期審查
• 字型會導致不可見文字閃爍 (FOIT) — 使用 font-display: swap 並預先載入關鍵字型
• 在無痕模式下使用 Lighthouse 進行測量 — 擴充功能會影響結果

行動優先

• 從行動版 CSS 開始，再用 min-width 媒體查詢增加複雜度 — 向上擴展比向下削減更容易
• 觸控目標至少需要 44x44px — 手指不精確，小按鈕會讓使用者感到挫折
• 在真實裝置上測試，而非僅依賴瀏覽器 DevTools — 模擬節流會忽略實際的卡頓
• 水平捲動是重大錯誤 — 每個頁面至少要以 320px 寬度進行測試
• 必須有 viewport meta 標籤：<meta name="viewport" content="width=device-width, initial-scale=1">

無障礙存取

• 每個 <img> 都需要 alt 文字 — 裝飾性圖片使用空的 alt=""，有意義的圖片使用描述性文字
• 內文文字的色彩對比度至少需達到 4.5:1 — 使用 WebAIM 對比度檢查工具
• 表單輸入必須有關聯的 <label> 元素 — 僅有佔位文字 (placeholder) 不具無障礙性
• 必須支援鍵盤導航 — 使用 Tab 鍵測試每個互動元素
• 螢幕閱讀器會宣告標題層級 — 按邏輯順序使用 H1-H6，絕不跳層

HTML 結構

• 每個頁面只有一個 <h1> — 它是頁面標題，而非樣式工具
• 使用語意化元素：<nav>、<main>、<article>、<aside>、<footer> — 它們向瀏覽器和輔助技術傳達結構
• <button> 用於動作，<a> 用於導航 — 不要使用帶有點擊處理器的 div
• 外部連結應加上 rel="noopener" — 防止 target="_blank" 造成的安全漏洞
• 驗證 HTML — 錯誤的標記會導致不同瀏覽器出現無法預測的渲染結果

CSS 模式

• 避免使用 !important — 它會破壞串聯性並讓除錯變得痛苦。請修正選擇器優先級
• 對文字使用相對單位 (rem、em、%) 而非固定的 px — 這樣能尊重使用者的字型大小偏好
• CSS 自訂屬性 (變數) 能減少重複 — 定義一次顏色和間距，隨處使用
• Flexbox 適用於一維佈局，Grid 適用於二維 — 不要勉強用一個去完成另一個的工作
• 測試無 CSS 載入的情況 — 內容仍應能以純 HTML 形式閱讀

常見錯誤

• 缺少 favicon 會導致伺服器記錄檔出現大量 404 錯誤 — 請務必加入一個，即使是簡單的 PNG 也可以
• 未設定 <html lang="en"> 會破壞螢幕閱讀器的發音
• 硬編碼的 http:// 連結在 HTTPS 網站上會失效 — 使用協定相對連結 // 或一律使用 https://
• 假設 JavaScript 一定可用 — 核心內容應能在沒有 JS 的情況下正常運作 (漸進增強)
• 忘記列印樣式 — 為使用者可能列印的頁面 (收據、文章) 加上 @media print

上線前檢查

• 測試所有表單能否實際提交 — 損壞的聯絡表單會悄悄流失潛在客戶
• 檢查 404 頁面是否存在且有幫助 — 預設的伺服器 404 頁面看起來很不專業
• 使用 Open Graph 標籤驗證社交分享預覽 — 在 Facebook/Twitter 偵錯工具中測試
• 將 Sitemap 提交至 Google Search Console — 加快索引速度
• 設定運行狀態監控 — 在使用者通知你之前，先知道你的網站何時掛掉