组件化学习总结三——css设计

css模块化设计（精练的）

1.设计原则

（1）可复用能继承要完整

 1.可复用：样式看起来能不能复用，系统是否有很多的地方

 2.能继承：这个模块写完了，有a b c 的样式，下一个模块用的是，可以用 a b c，还有可以覆盖掉某一个

 3.要完成：不能只去写样式去抽出来，这样太小了，需要看看是否有交互，等等，要完整性

（2）周期性迭代

 1.优秀的代码是模仿出来的

 2.优秀的代码是设计出来的

 3.优秀的代码是重构出来的

需求在变，产品在变，是不是模块化是不是有不合理的部分，这样需要不断开发的过程中，不断去迭代，

2.设计方法

（1）先整体后部分再颗粒化

 1.布局级别：先看大局（譬如移动端的布局，是怎么去布局，用这个布局去抽象出来几个模块）

 2.页面级别：页面页面之间的关联关系，譬如页面之间有公共的样式，这个时候布局模块里面的某一个样式

3.功能级别：譬如很多页面都有这个按钮，但是按钮的文本以及功能是不一样的，这个时候可以站在一个大的角度去思考问题，

写一个比较基础的按钮，通过继承，重写等方式去实现不同的按钮，那么这个基础的按钮就是一个功能组件了

4.业务级别：譬如页面中返回按钮，这个按钮通过继承功能按钮，就可以变成一个业务组件了

从上面看的出来是通过大到小的一个思路去写这个样式的

（2）先抽象再具体

譬如很多页面，有很多的模块，但是某一个模块其实是不一样的，这个时候不要具体去看不同的，而是把这些都看成相同的东西，只不过隐藏，或者增加了某一些模块的东西，这就是就可以抽离出一个组件了，然后这个组件是通过继承，重写，配置等等，实现成具体的某一个模块，这就是先抽象再具体的原理了、

3.代码实现

说了上面这么多，具体的实现是怎么样的

（1）基础样式

 reset.css layout.css element.css

这个三个样式，第一个是很普遍的样式，就是消除元素的一些样式，第二个是布局样式，这个样式的话是写页面的布局的样式

第三个样式是功能样式，譬如一个功能按钮的样式

（2）具体引用

 写好以上的样式的话，我们通过引入有两种方式

1.global：普遍的引入方式

 <style lang="scss">

  @import "../element.css"

 </style>

2.scope： 这种是为了防止相同名称，但是保证样式不一样的情况下选用的方式

 <style lang="scss" module>

  @import "../element.css"

 </style>

以上是基本的原理说明，下面会贴出代码，以及编写的思路

1.布局样式

2.功能样式。这里有三个：一个按钮，一个列表，一个面板

以上就是样式的部分，样式总结完了，接下来是总结js的写法了