前言
近期在大改造現有產品的設計系統，預期會與來自不同領域的人合作，因此這篇文章是寫給對網頁無任何前置知識的人的，主要介紹「介面元件化」這個概念。此篇文章還在參考不同資料編寫中。
什麼是元件？
元件是一塊拼圖、一個積木、一個齒輪……，就是一個可以被重複使用並且可被組合成更大物件的概念。這個概念從早期網頁就已存在，舉例來說一個網頁元件可以是個按鈕、輸入框、下拉式選單：
<!-- 按鈕 --><button>點擊我</button>
<!-- 輸入框 --><input type="text" />
<!-- 下拉式選單 --><select> <option>選項一</option> <option>選項二</option></select>除此以上的範例外，網頁還有許多「原生（瀏覽器預設支援）」的元件，可以直接在瀏覽器中呈現，開發者們可以用宣告（Declarative）的方式去架構它們，讓瀏覽器去處理它們的行為。
所以總結起來，大多網頁元件有以下幾種特性：
- 顯示於頁面上
- 具備某種可傳入的屬性
- 可選擇性的添加子內容
- 隱藏實作細節
- 預設樣式
- 可以被重複宣告使用
- 具備預設狀態
現代主流的前端框架例如：React、Vue、Angular 或是 Web Component 也採取元件化的概念，元件化對網頁開發來說是很基礎必備的觀念。
元件化的概念
了解元件化的概念後，可以發現這是一個非常實用的概念！與其建構一個龐大的系統，不如將系統拆解成許多小的元件，再將這些元件組合起來，就能建構出一個龐大的系統，這麼一來有以下的好處：
- 減少重複工作
- 保持一致性
- 更清晰的職責
看起來很簡單的道理，但我們還是花許多時間在寫 以頁為單位的 AWD 網頁 未思考長期產品的維護與擴張性。元件化的過程不只包含了創造新元件，也需要考慮如何將現有的系統整理成可靠可維護的元件，需要團隊上下一同努力才能達成：
- 元件應當從視覺或互動階段開始著手建立
- 元件應當有對應的規則去建立
元件化的規則
元件應當應該足夠小以解決特定問題，但又不能太小而無法成為更大解決方案的部分，白話來說就是元件要有清晰獨特的職責，並也能包容系統的差異性，像是：logo, button, menu, input, dropdown, video, image 都是小而精確的介面元件案例。
在獨立的環境建構元件
元件不應該依賴外部的環境來運作，不管是功能上還是樣式上，元件都應該是獨立的，這樣才能確保元件在任何環境下都能正常運作：
- 功能上：與純粹函式的概念相似，元件不應該隱性的依賴外部的狀態來表現，而是應該透過傳入的屬性來決定。
- 樣式上：謹慎使用
absolute、fixed或外距這類依靠外部環境或影響外部環境的樣式，這類樣式會讓元件失去獨立性，造成於不同環境下的表現不一致。