快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

很久之前就知道 宜家 ,以前在广州的时候也去过一次,给我的印象就是:大、贵、巧。地方很大,东西很贵,设计很巧。现在住的地方离宜家不远,这个月找时间去逛了下,地方还是那么大,东西还是那么贵,设计还是那么的巧。虽然没有买什么东西,不过也还是有所收获的,通过宜家的家具设计方法,我们可以聊聊模块化。

去过宜家的同学应该都有注意到,宜家的家具基本都是组合的,可拆装。模块化的特点也是这样,可以组合,相对独立,在需要的时候可以很方便的加上。那怎么写可以基本实现这种方式呢?给个简单的例子:

<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{...}

实际应用中大多需要加一些classname来减少类定义的复杂度,这个例子比较简单,但足以说明模块化的特点。上面两个模块可同时被使用到一个或多个页面中。

在宜家的卖场中,也许你也注意到了,基本是以设计师来划分商品区的,特别是那些小件的商品。模块化后的代码也可以被分配给不同的人进行编写,提高效率。当然要实现这种方式,我们也需要做些工作,如模块的命名规范、模块中哪些地方是需要留接口的等等。如上面的例子中可以约定的就有:命名以“mode”开头,模块标题使用h3标签。这样不管是哪个人写出来的模块都可兼容项目中的页面。

看到这你可能会发现,既然上面已经约定了模块固定的结构,每个模块的样式定义中所写的这一部分不就是冗余的吗?是的。如果已经形成相关的约定,这部分的样式定义可以被提出来放到项目的公共定义中

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号