CSS模块化的理解

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

迫不得已的，我们增加了很多带有不同标记的样式。可是1年后呢有人问起你这些样式所控制的对象是什么？
我可以肯定你会说，“我很费解”。
或者当你自己又写了一个“h2.XX”（命名重复的情况经常出现），无意覆盖了这个1年前的样式，而你又不知道，又恰巧被你的老板发现了…….上帝只能说，阿门，哥们，点被不能怨上帝。

可如果在一开始我们用这种方法写呢？

CSS

.wrap_content_box {float:left;}
#wrap_con_00 h2, #wrap_con_01 h2 {...}

XHTML

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

粗看是多了一些，但是当我们再次遇见给h2增加不同样式的时候，我们可以…

CSS

.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}

XHTML

<!-- 左边 -->
<div id="wrap_con_00" class="wrap_content_box">
  <h2 class="first">...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div id="wrap_con_01" class="wrap_content_box">
  <h2 class="first">...</h2>
  <h2>...</h2>
</div>

看，这样是不是好多了，这种格式在1年后，有人问起的时候，我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。

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

上一页 1 2

分享到：更多

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

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

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

随机推荐