模块化
什么是模块化？
简单的说：
是一个系列相关联的结构组成了整体，比如一个歌单，里面的基本信息区域，歌曲列表区域，这些一个一个的区域，就是一个一个独立的模块，和产品经理口中的模块化基本可以约等于。
如何实现模块化？
在页面上一个模块一定是一个整体，例如导航：
<div class="nav">
<ul>
<li class="current">
<a href="#">推荐</a>
</li>
<li>
<a href="#">排行榜</a>
</li>
</ul>
</div><style>
.nav{};
.nav ul{};
.nav li{};
.nav li a{};
.nav li .current{}
.nav li .current a{}
</style>一个模块一定在一个div（容器，aside,nav这些新标签）里，css也是同样的一个整体。
那假如两个模块语义相同，但是样式有细纹的差别，比如一个内容都是居中的，一个内容都是靠左的，那么就要使用到一个新的方法：扩展
<style>
.nav{};
.nav ul{};
.nav li{};
.nav li a{};
.nav li .current{}
.nav li .current a{}
.nav-1 ul{};
</style>
<div class="nav nav-1">
<ul>
<li class="current">
<a href="#">推荐</a>
</li>
<li>
<a href="#">排行榜</a>
</li>
</ul>
</div>
这里给div新增了一个样式，nav-1，并且在css中重写了这部分样式，那么就达到了使用最少的代码定义了新样式
组件化
什么是组件化？
简单的说，就是将多个模块内，通用的内容使其抽象出来，单独组件化定义，这样在模块定义的时候就可以在多个模块内复用，而不用每一次定一个模块就定义一次通用内容。
在实现上和模块化是一样定义的
<span class="button">推荐</span>
<span class="button disabled">不推荐</span>.button{}
.button:hover{}
.button.disabled{}
.button.disabled:hover{}组件的扩展方式和模块的扩展方式一致，都是新定义一个类，在原基础的类代码下方进行修改覆盖
模块化与组件化的优点
- 多人协同，可以分工开发不同开发的模块
- 扩展，重用
- 维护性好
规范
规范的意义是什么？
可以更好的将开发落地，而不是空中楼阁。
规范有哪些？
基本有：文件规范，命名规范，格式规范；
文件规范：例如可以通过分类，一是分成：通用类，业务类的文件夹，二再将通用类的文件夹分成：基本，框架，ui等，业务类的可以在分成栏目，业务等等；
命名规范：
- 分类格式：比如可以将模块类型的命名成m-开头，比如m-nav，可以将组件类型的命名成u-开头，这样团队成员就可以一眼就看出，这个是什么类型的样式；
- 扩展格式：比如可以命名.m-nav-1，说明这个是对模块中nav的一个扩展
- 语义格式：比如导航是缩写的前三个单词nav还是要全称的navigation，这种就是对语义的格式规范，否则，同样的一个导航单词，就可能写出几十种写法
格式规范：
定义：比如样式要在一行写完，还是可以换行的常规写法针对格式上有一个统一的定义；
注释：主要是两种，一种是块状注释要怎么写，一种是单行注释有什么格式，单行注释建议前后各有一个空格，可以避免乱码等意外引起的一些问题；