技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
0
0
佛心分享-IT 人自學之術
SASS/SCSS的認識與實作
系列 第
21
篇
Day21 部件化設計 (Component-based Design)
16th鐵人賽
yu_ting
2024-10-06 16:27:06
195 瀏覽
分享至
是一種將頁面或應用程式分解成獨立、可重複用的部件(components)的設計方法。每個部件都負責處理自己的一小部分功能或樣式,並且能夠被獨立開發、測試和重用。這些部件可以是按鈕、導航欄、卡片、表單等,讓開發者可以模塊化地建構應用
特點
重用性:每個部件可以在不同的頁面或專案中重複使用
獨立性:部件之間相對獨立,能夠各自負責不同的功能或外觀
易維護:變更部件樣式或功能時,不會影響其他部件,這提高了維護的效率
使用Sass進行部件化設計的好處
可重用性:SASS 的變數、混合器、函數等工具讓設計可以模塊化,並在多個部件中重複使用
結構清晰:使用 SASS 可以將每個部件的樣式拆分成獨立的檔案,方便管理和維護
一致性:變數和混合器的使用,確保樣式在不同部件中保持一致
靈活性:透過 SASS 的繼承、循環結構等功能,樣式可以根據需求輕鬆調整
應用
網站:例如按鈕、導航欄、頁腳、卡片、表單等常見的 UI 元件都可以用部件化設計進行重複使用
Web 應用:可將應用的每個功能部分(例如彈窗、表單驗證、訊息提醒)設計成部件,方便開發和擴展
設計系統:SASS 非常適合用來建立設計系統,確保所有部件在樣式和行為上保持一致
該注意之處
過度分解:避免過度將應用切分成太多部件,這會導致程式碼過於複雜、難以管理
命名規範:每個部件的樣式和類名應遵循一致的命名規範,例如 BEM(Block Element Modifier)方法,以避免樣式衝突
組件依賴性:部件應盡量保持獨立,避免過度依賴其他部件,否則修改其中一個部件可能會影響到其他部分
性能:大量小型部件可能會導致性能問題,特別是在網頁渲染過程中
留言
追蹤
檢舉
上一篇
Day20 SASS 構建可重複使用的網格系統
下一篇
Day22 部件化設計例子
系列文
SASS/SCSS的認識與實作
共
30
篇
目錄
RSS系列文
訂閱系列文
0
人訂閱
26
Day26 模塊化 SASS 架構例子
27
Day27 SASS 相關的開發工具
28
Day28 自動編譯
29
Day29 SASS 生成主題
30
Day 30 深淺色主題實作
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
14826
篇
完賽人數
170
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
17th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
部屬電腦如何讓每一台開始功能表跟工作列都一樣
請教大神.這個google試算表到底發生了什麼事情?輸入或是修改資料整張工作表會被清空,已自行解決完成.感謝.
如何使用RPA軟體搜尋相關新聞
useCrudSchemas的swtich欄位吃不到網址的參數
Analysis Services資料庫還原失敗
對Kotlin的sealed class機制不太清楚
excel web adi 巨集,出現網頁指令碼錯誤
list of Official coinbase™™Customer care"" Numbers in the USA: A Complete Guide
熱門回答
部屬電腦如何讓每一台開始功能表跟工作列都一樣
如何使用RPA軟體搜尋相關新聞
熱門文章
第12天,實作無封裝數位簽章 / 店小二魯肉飯 號稱第二的滷肉飯(新北三重) | 30天滷肉飯
[為你自己學 n8n] 第 13 天,LINE 機器人誕生記!
第12天,Cloudflare Pages 與 Workers / 馬力碳烤雞排 | 30天板橋湳雅夜市
第13天,實作PKCS#7封裝的數位簽章 / 雙月食品社(台北中正)| 30天滷肉飯
第13天,Cloudflare Pages 與 Functions / 好椰熱帶特調 泰奶天花板 | 30天板橋湳雅夜市
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}