前端开发——模块化（css模块化开发）

掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成：

1.css模块化
2.html模块化
3.js模块化

模块化开发的优势

1.更好的组织和维护代码
2.按需加载
3.避免命名冲突

css模块化

css模块化编程语言

说到css的编程语言我们就需要了解一下css预处理器，它用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

css模块化编程语言的的种类

1.sass
2.less
3.stylus
4.Turbine
5.Swithch CSS
6.CSS Cacheer
7.DT CSS
……

现阶段流行的编程语言

1.sass(建议使用)
    sass的最新版本scss，这个语言有和css相似的结构，直接用*.css文件改文件名为*.scss，就可以进行编译使用
2.less

sass编程语言组成

1.变量
2.嵌套
3.混合
4.继承
5.函数
6.运算
7.条件判断与循环
8.注释

使用的工具

1.命令行
ruby
安装使用教程：http://www.imooc.com/code/6389
2.可视化工具
koala
下载地址：http://koala-app.com/index-zh.html
使方用法：http://www.w3cplus.com/blog/777.html

css开发中的规范（BEM）

1.B（block）:模块化
2.E（element）:元素标签
3.M（modify）:属性修饰
结构：
.block{}
.block__element{}
.block--modifier{}

详细介绍见 参考资料 BEM

参考资料和视频教程

css预处理器相关文档

http://www.w3cplus.com/bookmarks/css-preprocessor.html

sass

http://www.sass-zh.com/docs.html （官方文档跳转）
http://www.w3cplus.com/sassguide/syntax.html（文档）
http://www.imooc.com/learn/311（视频）
http://www.imooc.com/learn/436（视频）
http://www.imooc.com/learn/371（视频）

less

http://lesscss.cn/ （官方文档跳转）
http://www.imooc.com/learn/61（视频）
http://www.imooc.com/learn/102（视频）

BEM

http://www.w3cplus.com/preprocessor/getting-sass-y-with-bem.html
http://www.w3cplus.com/css/battling-bem-extended-edition-common-problems-and-how-to-avoid-them.html