Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS_重構.pdf
Search
CypressKuo
January 28, 2021
Technology
0
23
CSS_重構.pdf
CypressKuo
January 28, 2021
Tweet
Share
More Decks by CypressKuo
See All by CypressKuo
Deep-copying.pdf
cypresskuo
0
30
CSS_for_Web_Vitals.pdf
cypresskuo
0
35
談談_Code_review.pdf
cypresskuo
0
42
REST_vs_GraphQL_今夜はご注文はどっち.pdf
cypresskuo
0
21
跟上_JS_的腳步-ES2020.pdf
cypresskuo
0
26
Core_Web_Vitals.pdf
cypresskuo
0
51
這個時代人人都知道的敏捷開發.pdf
cypresskuo
0
55
Webassembly.pdf
cypresskuo
0
11
談談_Functional_Programming.pdf
cypresskuo
0
25
Other Decks in Technology
See All in Technology
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
720
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
170
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
150
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
180
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
AWS IoT 超入門 2025
hattori
0
330
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Navigating Team Friction
lara
190
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
The Art of Programming - Codeland 2020
erikaheidi
56
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
KATA
mclloyd
32
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Transcript
CSS 重構 架構完善的樣式表
CSS Refactoring CSS重構 作者: Steve Lindstrom 譯者: 陳健文 出版社:歐萊禮 出版日期:2017/04/25
Agenda 1. 重構與架構 2. 串接 3. Good CSS 4. 正規化
5. 測試 6. 重構策略
重構與架構 重構:讓簡化程式、好複用、不改變其行為 軟體架構:描述軟體專案中,各種零件如何組織的用語
好架構 可預期 有助複用 易擴充 好維護
重構 誰需要:還活著的程式碼 誰不需要:沒有新需求、死掉的程式碼 何時:發現異味
重構與架構 簡單的說,重構能改善軟體的架構。
串接 決定樣式如何套用到元素上的方法 (其實就是 CSS 的權重
None
Good CSS 善用註解 一致的結構 (coding style) 單純的選取器 切斷 CSS 與
JS 的耦合 使用類別選取器 取有意義的名稱 避免過度模組化(? 使用對的 box model
正規化 (略 都 2021 年了,就善用別人寫好的。 把精力留在其他地方 reset.css normalize.css
測試 測試 CSS 難度高 瀏覽器多 視窗尺寸 自動化困難
測試 只測重要的瀏覽器 有彈性的設計 使用視覺回歸測試 ex: Gemini (https://github.com/gemini-testing/gemini) 遵守 Style Guide
重構策略 使用工具分析 CSS Dig (https://www.cssdig.com) 大家的好朋友: chrome dev tool
重構策略 一致性的架構規則 (coding style) 刪除廢碼 切斷 CSS 與 JS 的耦合
拆分基底樣式、拆分工具樣式 移除多餘的 ID、將 ID 轉為類別 定義可複用組件 移除行內 CSS 隔離針對性的 CSS (ex IE only or Safari only)
成效評估 沒改壞 降低耦合 減少檔案大小 省下開發時間
同場加映 OOCSS SMACSS BEM CSS Modules CSS in JS
重構過程很繁雜,但結果會讓人身心愉快,就像減肥一樣
感謝聆聽 Q & A