什么是模塊(Modules) ?

模塊是一個特別的獨立單元，可以與其他模塊組合以形成更復雜的結構。

在客廳里，我們可以認為電視，沙發和墻藝術是模塊。它們聚在一起創造一個可用的房間。

如果我們把其中一個拿走，其他的能繼續工作。我們不需要電視，也可以坐在沙發上等等。

什么是組件(Component) ？

模塊是由組件組成的。沒有組件，模塊會不完整。

例如，沙發由框架，室內裝潢，腿，靠墊和后枕組成，所有這些都是必要的組件，以使沙發能夠正常運作。

徽標模塊可以包括副本，圖像和鏈接，這些每個都是組件。沒有圖像的標志是殘缺的，沒有鏈接標志是也是不完整的。

Modules vs components

有時很難說某樣東西是一個組件還是一個模塊。例如，我們可能有一個包含徽標和菜單的標題。這些是組件還是模塊？

通過經驗，你會找到感覺吧。如果不對，就把組件更改成模塊，這很容易。

這只是理論，我們一起構建三個不同的模塊。在這樣做的時候，希望能夠覆蓋編寫CSS時候考慮的大部分事情。

1. 創建一個購物籃模塊。

為了簡潔，我們把這個購物籃簡化。購物籃中每個產品會顯示標題，并且可以把它移除。

購物籃模板可能是：

<div class="basket"><h1 class="basket-title">Your basket</h1><div class="basket-item"><h3 class="basket-productTitle">Product title</h3><form><input type="submit" class="basket-removeButton" value="Remove"></form></div> </div>

CSS 代碼：

.basket {} .basket-title {} .basket-item {} .basket-productTitle {} .basket-removeButton {}

2. 創建預覽訂單模塊

接下來，我們將構建一個預覽訂單模塊。這個模塊會在結帳時候顯示，它與購物籃有些相似。比如，它有標題，可以顯示產品列表。

但是，它倆樣式不同，并且預覽訂單中的產品不能被移除。

首要的是，復用購物籃的模板和樣式。它們即使有相似，但卻不同。

--- 未完待續---

轉載于:https://www.cnblogs.com/lvyongbo/p/7112071.html

總結

以上是生活随笔為你收集整理的MaintainableCSS 《可维护性 CSS》 --- 模板篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。