重构中的模块化设计:样式的作用域
发布时间：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
投稿猜你喜欢
- BLOG地址：http://www.planabc.net/article.asp?id=107学习标准的朋友，一般都会在学习的过程中接触到
一、条件简化我们编写的查询语句的搜索条件本质上是一个表达式，这些表达式可能比较繁杂，或者不能高效的执行，MySQL的查询优化器会为我们简化这- 闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。
- java连接数据库增、删、改、查工具类数据库操作工具类，因为各厂家数据库的分页条件不同，目前支持Mysql、Oracle、Postgresq
- 在cmd下运行go程序或者是GOLAND的Terminal下运行go程序会出现中文乱码的情况。go run ttypemain.go����
- 1. 游戏是更注重于体验的产品，所以应该将游戏本省做得更加炫动和增加参与感觉。2. 网络游戏和单击游戏的区别在于社会化的添加，所以运用好这样
- 一、打开、关闭文件 open的返回值用来确定打开文件的操作是否成功，当其成功时返回非零值，失败时返回零
- 当我们使用 tensorflow 训练神经网络的时候，模型持久化对于我们的训练有很重要的作用。如果我们的神经网络比较复杂，训练数据比较多，那
- 窗口函数形如：表达式 OVER (PARTITION BY 分组字段 ORDER BY 排序字段)有两个能力：当表达式为 rank() de
- 故障描述percona5.6，mysqldump全备份，导入备份数据时报错Duplicate entry 'hoc_log99-it
- 程序员的时间很宝贵，Python这门语言虽然足够简单、优雅，但并不是说你使用Python编程，效率就一定会高。要想节省时间、提高效率，还是需
- 1、Matplotlib 简介数据可视化有助于更有效地讲述有关数据的故事并使其易于呈现。有时很难用静态图表来解释数据的变化，为此，我们将讨论
- 本文实例讲述了Python使用matplotlib绘制三维图形。分享给大家供大家参考，具体如下：用二维泡泡图表示三维数据泡泡的坐标2维，泡泡
- 1、半开放socket利用shutdown()函数使socket双向数据传输变为单向数据传输。shutdown()需要一个单独的参数，该参数
- 这篇主要探讨 ** 和 * 前缀运算符,**在变量之前使用的*and **运算符.一个星（*）：表示接收的参数作为元组来处理两个星（**）：
- 1. 打开Anaconda Prompt（在命令行格式下，输入代码，建立pytorch环境、安装pytorch、测试pytorch过程）2.
- 本文介绍了如何在Linux下安装MySQL8.0，供大家参考，具体内容如下准备工作：mysql8.0 rpm文件测试工具（比如 idea的d
- 方式1：引入普通的js文件，如user.js1.1、属性和方法都写在一个变量内部const user={ logi
- 首先给大家分享一篇js中int和string数据类型互相转化实例https://www.aspxhome.com/article/15474
- 通常我们的网站里面会加载一些js代码，统计啊，google广告啊，百度同盟啊，阿里妈妈广告代码啊，一堆，最后弄得页面加载速度很慢，很慢。解决
