想不想get新技能酷炫一下，今天图老师小编就跟大家分享个简单的页面重构中的模块化思维:理解好样式的作用域教程，一起来看看吧！超容易上手~
【 tulaoshi.com - Web开发 】
很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模块化的内容整理出来跟大家分享、参加交流会等等。
模块化设计我已经提过很多了，像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。
要做好模块化，我觉得理解好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。
写过程序的同学应该都知道，变量是有作用域的（不知道的同学自己去问谷歌，这里就不作解释了），样式的定义也同样存在着作用域的问题，即定义的作用范围，很容易就能理解，如下面的p的作用域：
样式选择器的优先级是学习样式的基础知识，一起简单回顾下：
使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。
从上面我们可以得出两个关键的因素：
权值的大小跟选择器的类型和数量有关 样式的优先级跟样式的定义顺序有关了解样式的权值后有什么作用呢？比如可以这样用：举一个最简单的例子，
p这里的文字颜色受全局定义的影响/p
div class="demo"p这里的文字颜色受类demo定义的影响/p/div
p class="demo"这里的文字颜色受类demo定义的影响/p
知道了样式的权值，你就知道上面例子的表现是怎样的了。进一步的应用，就是模块化了，比如《 从宜家的家具设计讲模块化 》中的例子，详细请移步。
来源:https://www.tulaoshi.com/n/20160220/1631818.html
看过《页面重构中的模块化思维:理解好样式的作用域》的人还看了以下文章 更多>>
