Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS_重構.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for CypressKuo CypressKuo
January 28, 2021
Technology
29
0

 CSS_重構.pdf

Avatar for CypressKuo

CypressKuo

January 28, 2021

More Decks by CypressKuo

See All by CypressKuo
Deep-copying.pdf
Avatar for CypressKuo cypresskuo
0
38
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
42
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
50
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
25
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
32
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
57
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
63
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
14
談談_Functional_Programming.pdf
Avatar for CypressKuo cypresskuo
0
32

Other Decks in Technology

See All in Technology
「コーディング」しない人のための Claude Code 入門　ChatGPT の次の一歩 — 業務に組み込む 育成・共有・自動化
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
1.2k
地元にいないローカルオーガナイザーの立ち回り
Avatar for uvb_76 uvb_76
1
960
先取りMaven4 ～16年ぶりのメジャーアップデート、その進化とは？～
Avatar for 荻原利雄 ogiwarat
0
150
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
760
[モダンアプリ勉強会]今更聞けないGit/GitHub入門
Avatar for つくぼし tsukuboshi
0
290
LLMを「主役」にしないための 3つの原則
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
120
noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.
Avatar for 株式会社カオナビ kaonavi
1
310
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
400
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
1.7k
Dynamic Workersについて
Avatar for Yusuke Wada yusukebe
2
610
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
Avatar for Yuya Matsumura yuya4
19
11k
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
210

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
240
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.6k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
480
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
390
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
It's Worth the Effort
Avatar for 3n 3n
188
29k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k

Transcript

  1. CSS 重構 架構完善的樣式表

  2. CSS Refactoring CSS重構 作者： Steve Lindstrom 譯者： 陳健文 出版社：歐萊禮 出版日期：2017/04/25

  3. Agenda 1. 重構與架構 2. 串接 3. Good CSS 4. 正規化

    5. 測試 6. 重構策略

  4. 重構與架構 重構：讓簡化程式、好複用、不改變其行為 軟體架構：描述軟體專案中，各種零件如何組織的用語

  5. 好架構 可預期 有助複用 易擴充 好維護

  6. 重構 誰需要：還活著的程式碼 誰不需要：沒有新需求、死掉的程式碼 何時：發現異味

  7. 重構與架構 簡單的說，重構能改善軟體的架構。

  8. 串接 決定樣式如何套用到元素上的方法 （其實就是 CSS 的權重

  9. None

  10. Good CSS 善用註解 一致的結構 (coding style) 單純的選取器 切斷 CSS 與

    JS 的耦合 使用類別選取器 取有意義的名稱 避免過度模組化(? 使用對的 box model

  11. 正規化 (略 都 2021 年了，就善用別人寫好的。 把精力留在其他地方 reset.css normalize.css

  12. 測試 測試 CSS 難度高 瀏覽器多 視窗尺寸 自動化困難

  13. 測試 只測重要的瀏覽器 有彈性的設計 使用視覺回歸測試 ex: Gemini (https://github.com/gemini-testing/gemini) 遵守 Style Guide

  14. 重構策略 使用工具分析 CSS Dig (https://www.cssdig.com) 大家的好朋友: chrome dev tool

  15. 重構策略 一致性的架構規則 (coding style) 刪除廢碼 切斷 CSS 與 JS 的耦合

    拆分基底樣式、拆分工具樣式 移除多餘的 ID、將 ID 轉為類別 定義可複用組件 移除行內 CSS 隔離針對性的 CSS (ex IE only or Safari only)

  16. 成效評估 沒改壞 降低耦合 減少檔案大小 省下開發時間

  17. 同場加映 OOCSS SMACSS BEM CSS Modules CSS in JS

  18. 重構過程很繁雜，但結果會讓人身心愉快，就像減肥一樣

  19. 感謝聆聽 Q & A