首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

CSS模块化的理解

来源: 互联网    日期:2009-2-3
 

在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>

迫不得已的,我们增加了很多带有不同标记的样式。可是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年后,有人问起的时候,我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。



更多的CSS模块化的理解请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2009-2-3   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报