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. 建立预览订单模块

接下来，咱们将构建一个预览订单模块。这个模块会在结账时候显示，它与购物篮有些类似。好比，它有标题，能够显示产品列表。

可是，它俩样式不一样，而且预览订单中的产品不能被移除。

首要的是，复用购物篮的模板和样式。它们即便有类似，但却不一样。

--- 未完待续---