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
0
27

 CSS_重構.pdf

Avatar for CypressKuo

CypressKuo

January 28, 2021
Tweet

More Decks by CypressKuo

See All by CypressKuo
Deep-copying.pdf
Avatar for CypressKuo cypresskuo
0
33
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
39
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
45
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
23
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
29
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
54
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
60
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
13
談談_Functional_Programming.pdf
Avatar for CypressKuo cypresskuo
0
29

Other Decks in Technology

See All in Technology
How to install a gem
Avatar for André Arko indirect
0
190
君はジョシュアツリーを知っているか？名前をつけて事象を正しく認識しよう / Do you know Joshua Tree?
Avatar for Y-KANOH ykanoh
2
110
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
930
The Rise of Browser Automation: AI-Powered Web Interaction in 2026
Avatar for Marc Thompson marcthompson_seo
0
280
AIエージェント×GitHubで実現するQAナレッジの資産化と業務活用 / QA Knowledge as Assets with AI Agents & GitHub
Avatar for Hitsuji tknw_hitsuji
0
160
モジュラモノリス導入から4年間の総括：アーキテクチャと組織の相互作用について / Architecture and Organizational Interaction
Avatar for Satoshi Kawashima nazonohito51
3
1.4k
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
27k
Phase05_ClaudeCode入門
Avatar for overflow ,Inc overflowinc
0
1.3k
Escape from Excel方眼紙 ～マークダウンで繋ぐ、人とAIの架け橋～ /nikkei-tech-talk44
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
スピンアウト講座04_ルーティン処理
Avatar for overflow ,Inc overflowinc
0
710
SLI/SLO 導入で 避けるべきこと3選
Avatar for Kota yagikota
0
140
スピンアウト講座06_認証系（API-OAuth-MCP）入門
Avatar for overflow ,Inc overflowinc
0
680

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
990
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.7M
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
330
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
420
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
76
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
270
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k

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