CSS 的模块化思想
作者:张经纬 来源:张经纬blog 发布时间:2009-02-03 12:52:00
标签:模块,语义,css,样式
在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么?的文章,文中主要是提及了CSS的命名规则,仔细阅读后,我认为这个其实就是模块化思想。(作者也提了这一点)。
我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。
1、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或模块样式表,这个样式表主要一些常见的基本结构和形式,如CSS Reset、Blank、Font 等等。
例如下面这个样式表,我认为就是一个简单的基础样式表。(只是简单,不推荐用)
* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}
2、在页面中按照结构模块化书写样式表,避免样式之间的干扰,并且方便浏览。
例如下面的这个结构
<!-- 左边 -->
<div>
<h2>...</h2>
<h2>...</h2>
</div>
<!-- 右边 -->
<div>
<h2>...</h2>
<h2>...</h2>
</div>
有一部分同学可能会这样写
.wrap_content_box {float:left;}
.wrap_content_box h2 {...}
<!-- 左边 -->
<div class="wrap_content_box">
<h2>...</h2>
<h2>...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
<h2>...</h2>
<h2>...</h2>
</div>
刚刚看上去的时候效果很不错,一切都很完美,代码少,效果也实现了,但如果有一天,我们需要将所有h2的样式变的各不相同时,情况仿佛不乐观了。
.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}
<!-- 左边 -->
<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年前的样式,而你又不知道,又恰巧被你的老板发现了…….上帝只能说,阿门,哥们,点被不能怨上帝。
可如果在一开始我们用这种方法写呢?
<!-- 左边 -->
<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增加不同样式的时候,我们可以…
.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}
<!-- 左边 -->
<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年后,有人问起的时候,我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。
0
投稿
猜你喜欢
- <script language="javascript"> functio
- 今天在写BLOG的Trackback时,需要用到当前页的URL地址,并且包括?后的所有参数。在网上看到以下的这段ASP代码,它的
- 不用整天为美化select控件烦恼了。1、可批量美化select控件。2、可以有onchange句柄。3、触发onchange的函数可带参数
- 阅读上一篇:AJAX的jQuery实现入门(一)要写入数据库,我们知道的最简单的就是注册了, 就做个最简单的注册表单, 看看是如何提交数据的
- 这是我以前发表在经典论坛的帖子,现在转贴回来。仿淘宝网站的导航效果。此方法有几个优点:根据字数自适应项目长度不同的项目使用不同的颜色来区分无
- 解决MySQL中文乱码的问题看到从数据库中取出的数据全部是“?????”,太让人郁闷了。网上有很多方法来解决这个问
- 随着信息技术的飞速发展,数据处理不仅在数量上要求越来越大,而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的,在数据库可操作
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- blankzheng的blog:http://www.planabc.net/margin在中文中我们翻译成外边距或者外补白(本文中引用外边
- 在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的
- 1、将css与javascript全部用下边的方法分离到外部文件中去。<link rel="stylesheet"
- Dreamweaver从出道以来,其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver
- '定义变量 Dim cn,rs,Sql Sql = "sel
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
- MySQL安全性指南(3) 作 者: 晏子2.4 不用GRANT设置用户如果你有一个早于3.22.11的MySQL版本,你不能使用GRANT
- 这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。1 如何进行字符串连接?首先让我们来回顾一下字符
- 阅读上一章:chapter 5 表单Chapter 6 <strong>,<em>与其他短语元素在引言和前面的章节中
- 数据类型是所有开发语言的基础,JavaScript虽然是一个弱类型的脚本语言,但是在数据类型上也有很多讲究的,看了淘宝UED玉伯的一篇文章,
- 平时我们获取事件对象一般写法如下:function getEvent(event) { return event
- 用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受。在基于Web的产品设计中,UE是一个相对