重构中的模块化设计:样式的作用域
时间:2010-04-23 14:42:00
很久没有更新blog了,这段时间实在是发生了很多的事,累身累心。但还是有很多想做的事,比如更新merceCSS、把一直以来所总结的有关模块化的内容整理出来跟大家分享、参加交流会等等。
模块化设计我已经提过很多了,像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相关的,不过之前一直没有讲到具体实现方面的内容,只是一些思维。这次重点讲一下实现方面的内容,权当到目前为止我对模块化的一些总结整理。
要做好模块化,我觉得理解好样式的作用域是很重要的,所以将这部分作为这个系列的第一篇。
写过程序的同学应该都知道,变量是有作用域的(不知道的同学自己去问谷歌,这里就不作解释了),样式的定义也同样存在着作用域的问题,即定义的作用范围,很容易就能理解,如下面的p的作用域:
/*作用域:全局*/ p{text-indent:2em;}
/*作用域:.demo这个类中*/ .demo p{color:#000000;}
样式选择器的优先级是学习样式的基础知识,一起简单回顾下:
标签的权值为0,0,0,1
类的权值为0,0,1,0
属性选择的权值为0,0,1,1
ID的权值为0,1,0,0
important的权值为最高1,0,0,0
使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。
从上面我们可以得出两个关键的因素:
权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关
了解样式的权值后有什么作用呢?比如可以这样用:举一个最简单的例子,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
知道了样式的权值,你就知道上面例子的表现是怎样的了。进一步的应用,就是模块化了,比如《 从宜家的家具设计讲模块化 》中的例子,详细请移步。
标签:模块化,设计,样式,作用域
0
投稿
猜你喜欢
(X)HTML Strict 下的嵌套规则
2008-03-08 18:39:00
WML初级教程之从实际应用中了解WML
2008-09-04 11:24:00
定位后无法选择容器的内容解决方案
2008-07-30 12:08:00
MySQL 重装笔记
2011-02-23 12:22:00
javascript读取Json数据并分页显示,支持键盘和滚轮翻页
2010-01-06 13:03:00
ASP实现类似Java中的Linked HashMap类
2010-04-03 20:49:00
Access与Flash的结合应用
2008-11-20 16:44:00
Dreamweaver量身打造Wordpress留言板(三)
2009-12-13 18:45:00
PDO取Oracle lob大字段,当数据量太大无法取出的问题的解决办法
2009-04-30 18:41:00
SQL Server中ISNULL函数介绍
2009-09-09 21:23:00
asp 在线备份与恢复sql server数据库的代码
2010-07-31 18:52:00
Oracle平台应用数据库系统的设计与开发
2010-07-21 13:03:00
“语法错误 (逗号) 在查询表达式id=20, 21”,怎么处理这个逗号?
2009-09-18 14:52:00
thinkphp5实用入门进阶知识点和各种常用功能代码汇总
2023-05-25 02:48:34
Ajax+asp应用实例 注册模块,表单提交
2011-04-08 10:47:00
ASP 常见的连接字符串写法(access2007)
2011-03-25 10:40:00
上传组件 ASPUpload 使用说明
2008-09-11 14:38:00
ie和火狐兼容问题
2010-07-02 12:50:00
MySQL 通过索引优化含ORDER BY的语句
2010-03-25 10:28:00
CSS网页布局避免滥用DIV元素
2011-03-30 12:34:00