CSS模块化设计是什么？

我们都逛过宜家(IKEA)吧？宜家的特点就是不管桌子、椅子、沙发，都是可以拆卸，并且扁平包装的（就是压到很扁的那种），这一设计理念大大减少了运送的费用，也是宜家为什么那么便宜的原因（便宜事相对而言的）。

我们把可以随意拆装、组合的东西称为模块，而模块化设计指的同样如此，当一个模块，需要使用的时候可以很方便的加上，而不需要的时候拆除，不会影响其他的模块使用。
这就是css模块化设计的理念！

来看个例子：

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

对应的CSS可以这么写：

.mode-a{...}
.mode-a h3{...}
.mode-a p{...}

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

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

对应的CSS可以这么写：

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

实际应用中大多需要加一些类名来减少类定义的复杂度，不过此例足以说明模块化的特点。

上面两个模块可同时被使用到一个或多个页面中，方便日后修改以及维护。

CSS模块化设计是什么？

最新相关内容

最新PPT模板

其它相关

广告位