通过宜家的家具设计方法学习CSS模块化

/* =S global */
h3{
/* 第一种写法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二种写法 */
...
}
/* =E global */
/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */

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

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

<div class="mode-b">
  <div class="mode-a">
    <h3>模块化Demo</h3>
    <p>模块化结构的例子。</p>
  </div>
  <div class="cont">
    <h4>模块化的特点：</h4>
    <ul>
      <li>相对独立</li>
      <li>可移植性高</li>
    </ul>
  </div>
</div>
<div class="mode-c">
  <div class="mode-a">
    <h3>模块化Demo</h3>
    <p>这个是“模块中的模块”的例子。</p>
  </div>
  <div class="cont">
    <h4>模块中的模块：</h4>
    <p>模块“mode-a”就是一个模块中的模块。</p>
  </div>
</div>

/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */
/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */

从上面可以看到，“mo

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!