兔兔的奶爸

MaintainableCSS - 一种编写模块化,可扩展和可维护的CSS的方法(作者:Adam Silver):模块

兔兔的奶爸 · 2016-12-11翻译 · 716阅读 原文链接

模块

什么是模块?

模块是不同的、相对独立的单元,它可以与其它的模块组合以构成一个更复杂的结构。

在客厅,你可以认为电视、沙发和墙是模块。他们组合到一起创造了一个可用的客厅。

如果你带走它们其中的一个,剩余的依然可以很好的工作。就像我不需要电视也可以坐在沙发上一样。

在网站中,header(头部)、footer(底部)、搜索表单、登录表单、购物车、文章、产品列表、导航栏、首页广告、归档列表都可以被认为是一个模块。

什么是组件?

一个模块可以由多个组件构成。没有组件,模块将不完整或者说被破坏。

例如沙发由框架、装饰、沙发腿、靠垫和后背枕头组成,所有这一切都是设计沙发、保证其正常工作必须的组件。

一个 logo 模块 可能由图片和链接,复制后组成,它们都是组件。没有图片, logo 就坏了,而没有链接 logo 就不完整了。

模块 VS 组件

有时候决定什么是模块什么是组件可能很棘手。比如 header 是一个模块,它可能包含 一个 logo 和一个导航菜单。它们两个是组件还是模块呢?

其实这并不重要,这可以凭你自己的经验决定。对我而言,在一个最近的项目中,我觉得logo是 header 的一个组件,而导航菜单对header来说是一个模块。

归根结底,只有你明白你的项目需求,如果你理解错了,把一个组件变成了一个模块是困难的,反之却是一件很容易的事情。

创建一个模块

让我们一起创建一个模块。我们将构建一个简单的购物车,它由一个标题和一些商品组成。每个商品都包含商品标题和移除按钮,这是一些我们可能用到的 HTML 代码:

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

这些是它们用到的选择器:

/* module container */
.basket {}

/* components */
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}

这些代码非常简单。

创建第二个版本的模块

现在让我们假设在检查订单期间,有一个精简版的购物车。也许它有一个“订单摘要”而不是“你的购物车”。它也可能没有移除商品的功能。

不要被重复使用所引诱

你也许被引诱尝试复用之前的购物车,但是正如我们在关于Reuse(复用) 的章节中所学到的,这样做是有问题的,原因有很多。

另外,你的模板或者partial(局部)必须与条件逻辑分开处理。你的条件越多,他们的关系越复杂。受到条件的限制越大,你对模板的改变也可能导致你没有测试到的地方发生变化,使其难以维护。

重要的事情说三遍!!

MaintainableCSS当然建议模块复用。在最近的一个项目中,我为.orderSummary命名了新的版本。它们有相似之处,但只有一些差异被复制,而不是痛苦的尝试重用。

最后,注意如何在 css 上面使用,我们不再使用语义化命名和封装样式,这使得当需要时非常容易维护、升级、进行AB测试而不必害怕影响到其他地方。

相关文章