掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成:
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