CSS模块化的理解

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

在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这个其实就是模块化思想。（作者也提了这一点）。

我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。

1、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。

例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用）

CSS

* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}

2、在页面中按照结构模块化书写样式表，避免样式之间的干扰，并且方便浏览。
例如下面的这个结构

XHTML

<!-- 左边 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>

有一部分同学可能会这样写

CSS

.wrap_content_box {float:left;}
.wrap_content_box h2 {...}

XHTML

<!-- 左边 -->
<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

刚刚看上去的时候效果很不错，一切都很完美，代码少，效果也实现了，但如果有一天，我们需要将所有h2的样式变的各不相同时，情况仿佛不乐观了。

CSS

.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}

XHTML

<!-- 左边 -->
<div class="wrap_content_box">
  <h2 class="XX">...</h2>
  <h2 class="YY">...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
  <h2 class="ZZ">...</h2>
  <h2 calss="XYZ">...</h2>
</div>

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

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS BUG问题解决的一些经验下一篇: 探讨：网页外部引用CSS的两种方式

关于CSS模块化的理解的所有评论

随机推荐