MaintainableCSS 《可維護性 CSS》 --- 模板篇

什麼是模塊(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. 建立預覽訂單模塊

接下來，咱們將構建一個預覽訂單模塊。這個模塊會在結賬時候顯示，它與購物籃有些類似。好比，它有標題，能夠顯示產品列表。

可是，它倆樣式不一樣，而且預覽訂單中的產品不能被移除。

首要的是，複用購物籃的模板和樣式。它們即便有類似，但卻不一樣。

--- 未完待續---