前端学习之路之css模块化设计

css模块化设计

1. 设计原则

• 可复用能继承完整

• 周期性迭代

1) 可复用能继承完整

如上图,如果我们对该进行css模块抽象,大家会怎么分块呢?有的会说右边两个可以分一块，因为字们长得很像。还有的会想'下载APP送888元礼包'与'打白条享免息'可以分为一个模块，因为它们前后都 是前黑色后白。还有的会想每个图片可以做成一个分块。

 以上这些都不太适合,比如第一种想法,两个可以分一块，因为字们长得很像，像这样的样式可能我们项目就几处是这种样式的，而不是普遍存在,所以这种不太符合 可复用能继承完整中的复用性。 再如第二种想法,'下载APP送888元礼包'与'打白条享免息'可以分为一个模块，因为它们前后都 是前黑色后,这种也不符合,因为它不完整，这个功能点太小了,它不具备完整的有交互，有样式，有内容的东西，所以这个不符合模块化的标准。

除了复用，完整，能继承是什么意思呢？比如我一个模块写完了有a,b,c三种样式,当下一个模块去使用的时候，它除了能用a,b,c三种样式外，可以去覆盖某个比如c的样式。

2) 周期性迭代

是指针对当下的需求,不是先思考2个月，3个月，在动手，也不是不断去重构，一遍又一遍推翻重来，这不现实，唯一 能做到好的就是，今天根据当前需求设计5个模块,当明天有的需求的时候，就要反思，我之前的模块是需要合并还是增加，通过这种迭代，永远控制着代码质量，让你的模块设计更加的规范和完美。

2. 设计方法

• 先整体后部分在颗粒化

• 先抽象再具体

1) 先整体后部分在颗粒化

既然是模块化设计,那你肯定要先顾大局,比如你的项目是针对移动端,移动端首先要考虑的是布局，布局是跟页面无关的，比如你是流布局,grid布局,先确定一个大方向，这个方向直接决定了你css写法，所以要整体考虑布局的样式，把这样的样式单独的模块化出来，然后根据需求划分多少页面，每个页面又该如何去区分跟隔离样式，比如A,B两个页面相似度很高,那么它们中间有很多可重用性代码，你要考虑这两个页面之间去抽离拆分这种模块化，这个时候就是考虑页面级别的，在考虑页面的时候就不需要在关心页面布局了。

功能级别的就是针对每一个页面来说，比如按钮，这个按钮是不是可以单独的拿出去，把它单独拿出去，把它做为是一种功能组件，而不是业务组件。就是说，我做的是一个按钮，哪怕当前这个页面显示的是提交，删除，它的明暗，动作可能不同，但是在css模块设计的时候，考虑的是它的样式长得一不一样，换句说，按照刚才说的可复用能继承完整，如果上图片功能图上有三个按钮，一样吗？它们长得不一样，背景色不一样，边框不一样，字体可能也不一样，这个时候要站在功能的角度上讲，用css写出一个按钮来，这个按钮显示的 什么文字，背景色是多少 这些是可继承的也是可覆盖的。

业务上就是要继承功能上所设计的UI,当前需要的样式就是写在当前这个页面里面。

2)先抽象再具体

如上图，抽象是说看着长得不一样东西，抽象成一个统一的模块，这个模块通过隐藏，配置达到具体的内容

css模块化例子 (使用sass语法)

布局基类 layout.scss

因为是移动端，使用flex布局,主要用法sass的mixin方法，参数主要有两个，第一个参数是指方向，横向还是竖直方向，第二个主要是指行内还是块级的

元素基类 element.scss

元素基类主要有三个按钮，列表，和面板，实现方法 大家自己参考，也可以自行拓展

以上是通过 学习总结，如总结有过分之处，请见谅

愿你成为终身学习者