1.背景介绍
如果css代码量比较庞大，那么就有可能给我们带来这样的困扰
（1）无法快速确切知道一个类的作用
（2）无法快速确定一个类在哪里被使用
（3）新增一个类是否会造成冲突
为了解决这个问题，可以将页面的每一个功能模块作为一个独立组件，然后对组件相关内容进行合理的命名，从而有助于我们确定一个css代码和相关页面结构的功能，也可以有效的防止冲突，提高代码的复用率。
Component，中文称为组件，或者构件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。
Module, 中文为模块或模组。它的核心意义是分离职责，属于代码级模块化的产出。它本身是提供服务的功能逻辑，是一组具有一定内聚性代码的组合，职责明确。
组件(Component)和模块(Module)又是一对容易混淆的名词，也常常被用来相互替换。从设计上来看，组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块
从任务看组件化
三个页面存在相似性，把这一部分单独提取出来作为模块，如果做到可以复用，就可以作为组件使用。
存在很多这样的页面，这就是我们做组件的目的，把可以复用的单独提取出来。
bootstrap 简介
Bootstrap，来自 Twitter，是目前很受欢迎的前端UI框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，bootstrap3即是由动态CSS语言Less写成。
2.知识剖析
文件组成
bootstrap 3.3.7 的less文件组成，层层递进，由基础文件建立各种组件。
关于bootstrap 变量可以看下面这篇文章：
但是变量值不对，主要变量。
使用
全局使用border-box
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
使用
3.常见问题
怎么实现组件化
4.解决方案
组件化方法
在CSS上，保证代码上的模块化，具有独立作用域； 内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响。 概括的说就是，组件内部的布局只受容器变化影响。 在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响
5.编码实战
十宫格改造为栅格系统
6.扩展思考
css 阶段能做组件化吗？
1 不能，组件化是HTML、css、JavaScript三方共同作用
2 目前只能叫做样式库，自己的整理和总结
7.参考文献
参考一 前端组件化开发
参考二 Bootstrap源码分析系列之整体架构
8.更多讨论
问：css 存在的问题？
答：css 样式全局性会导致样式无法应用或者样式覆盖不相关的元素。
问：组件化的形式
答：
资源高内聚---- 组件资源内部高内聚，组件资源由自身加载控制
作用域独立----内部结构密封，不与全局或其他组件产生影响
自定义标签----定义组件的使用方式
可相互组合----组件真正强大的地方，组件间组装整合
接口规范化----组件接口有统一规范，或者是生命周期的管理
问：bootstrap 是前端框架吗？
答：bootstrap 不能称为前端框架，侧重于样式，并且js 部分借助 jQuery 实现。
技能树.IT修真院
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。组件化