很久之前就知道宜家，但从未买过东西。一直听人说宜家的家具质量不好，便宜，整体是出租屋风，不过我倒是挺喜欢他家风格。上周去宜家逛了下，买了几件家具。你会发现宜家的设计很是巧妙，工作人员说无论家具大小，2个人就可以组装起来，像是搭积木一样。通过宜家的家具设计方法，抛下砖聊聊模块化设计。

　　去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装。像是这样：

　　还有这样： 　　这小小一堆东西包含了一张床，一个书桌，一个小桌子，脚凳，和一把躺椅。你所需要做的，就是像搭积木将它们组装起来。

　　模块化的特点也是这样，可以组合，相对独立，在需要的时候可以很方便的加上，而去掉的时候不会影响现有功能。那怎么可以基本实现这种方式呢？给个简单的例子：

<div class="mod-a">
    <h3>模块化Demo</h3>
    <p>模块化结构的例子。</p>
</div>

　　对应的CSS可以这么写：

.mod-a {...}
.mod-a h3{...}
.mod-a p{...}

　　其中“mod-a”就是这个模块的名称，表示这是名为“a”的模块，现在这个模块可以被放到你所需要的地方。既然是做模块，就不会只有一个，我们再加一个“mod-b”：

<div class="mod-b">
    <h3>模块化Demo</h3>
    <div>
        <h4>模块化的特点：</h4>
        <ul>
            <li>相对独立</li>
            <li>可移植性高</li>
        </ul>
    </div>
</div>

.mod-b{...}
.mod-b h3{...}
.mod-b div{...}
.mod-b h4{...}
.mod-b ul li{...}

　　实际应用中大多需要加一些classname来减少类定义的复杂度，这个例子比较简单，但足以说明模块化的特点。

　　在宜家的卖场中，基本是以设计师来划分商品区的，比如我买的床和书桌都叫MALM。模块化后的代码也可以被分配给不同的人进行编写，提高效率。当然要实现这种方式，我们也需要做些工作，如模块的命名、模块中哪些地方是需要留接口的等等。如上面的例子中可以约定的就有：命名以“mod”开头，模块标题使用h3标签。

　　宜家那些小件的商品，往往可以组合到不同的其它商品上面。这也带出了模块化的另一个话题：模块中的模块。即在模块中可以存在其它的模块，整个页面的结构就像是一个大的模块，而上面所讲的例子就是模块中的模块了，只不过我们把这个定义缩小一层。上面例子中对h3的定义，就可以看成是一个模块，它在“mod-a”、“mod-b”两个模块中都出现，并且结构表现相对固定。

　　SO，这只是对一个标签的定义，如果不只一个标签呢？我们重新改下例子：

<div class="mod-c">
    <div class="mod-a">
        <h3>模块化Demo</h3>
        <p>这个是“模块中的模块”的例子。</p>
    </div>
    <div class="cont">
        <h4>模块中的模块：</h4>
        <p>模块“mod-a”就是一个模块中的模块。</p>
    </div>
</div>

.mod-a{...}
.mod-a h3{...}
.mod-a p{...}

.mod-c{...}
.mod-c h4{...}
.mod-c .cont{...}
.mod-c .cont p{...}

　　晒下成果，如果可以，其实我倒是挺想整体风格都照搬宜家:D，因为不喜欢其他家具的过度设计。比如说床，床头动不动给你雕上龙和祥云，顺手加木头柱子，雕的好看也行，关键丑得突破天际。一说就是实木————我要实木干嘛？让你雕难看的送子观音吗？而且大部分家具都在家具城里卖，得讲价，就让我觉得很难办，讲价吧……不会，不讲价吧，又觉得自己吃亏了。

　　顺便提醒一下，宜家的大件东西，比如床什么的，如果你没有 “用好棒的工具装这东西真让人exciting！” 的觉悟，就最好让安装师傅装。