【组件模块化4】CSS模块化设计

CSS模块化设计

设计原则

a、可复用能继承要完整
b、周期性迭代

设计方法

a、先整体后部分再颗粒化
b、先抽象再具体

---

a、可复用能继承要完整

例图1

比如拿到这个设计图，来思考css的模块设计。

这两个

可能觉得这两个地方可做模块。但是翻其他地方，这种看上去长得很相似，功能点小，其他地方又找不出有用这种样式的，就不能叫做可复用，所以不要拆除出来。

而单看字体，左黑右红，这个地方太小了不完整，不具备有交互、有样式、有内容的特点。

能继承的意思是，这个模块写完，有abcd的东西，下一个模块拿来用除了有abcd，还能自己覆盖某一个，比如说把d给覆盖。

b、周期性迭代

三种观点

现在的代码的模块化设计是针对当前产品需求思考出来，随着产品的变化，要思考之前的模块化是不是可以修改。
有些人在之后觉得之前的模块化设计的不合理也不管，遇到的所有问题都是因为没有周期性迭代。
比如说根据当前需求设计了5个模块。之后拿到需求要思考这5个模块是要修改，还是要增加。
要用这种迭代的方式，控制代码。

---

设计方法

示意图

布局

项目是针对移动端的，首先考虑布局，这个是和页面无关的，比如说是flex布局，还是浮动布局，还是grid布局。要决定一个大方向，因为方向决定css的写法，要整体考虑布局的样式，成为模块抽象出来。然后根据这个产品需求，划分多少页面，每个页面该如何区分和隔离样式。

页面

比如说A和B两个页面的相似度高，它们中间有很多样式上可重用型的代码，要考虑如何抽离开分这种模块化，这时候考虑是页面级别的，而不是布局了，因为布局已经单独拿出去了。
比如说 大多数是列表，两栏布局，还有垂直列表。这个时候会把列表式的布局，都拿到布局上去，而在考虑页面的时候，关心的是模块，比如说两大模块，上下各一个头，这个是单独拿出去，这种是页面级别。

功能

针对某一个页面上来说，比如按钮。把它当成一个功能组件，而不是页面组件。虽然文案、行为不同，但是在CSS模块时，考虑的是它的样式是否是一样的。它的设计原则是可继承，三个按钮的背景色或者边框不一样，但是站在功能角度上来说，用css写出一个按钮来，至于按钮上写什么文字，什么颜色，这些都是填充、可继承的。

业务

业务是最后的颗粒化，具体到某一项的功能、逻辑、交互上了，比如说移动端上的返回，返回在形式上叫按钮、或者说叫一个链接，这个回退就是我们所说的功能组件，在功能上抽象出来，在业务上继承刚刚所说的那个功能UI，但是它有具体的逻辑，比如说点返回，跳转到某一个页面，或者点击弹出某个弹窗。这种已经和业务耦合了，这种颗粒化要放在当前的业务里，比如说vue: 它有template还有script和style，这里的样式就该放到style中了。

先整体是考虑整体的布局，后部分是说下一个维度，考虑页面与页面之间的关系。第三个考虑某一个页面上，或者说脱离了页面中的具有功能性的样式模块，最后一个是涉及到某个页面某个组件中的具体样式。
比如说按钮抽象出来一个样式，不管里面是什么，在具体的style里，可以覆盖抽象的模块样式，可改边距等等，这就是颗粒化了，在这个程度上，基本上不能再复用了，或者说复用的可能性不大了。

方法2

比如说拿到这个页，我们原则是先抽象再具体。
抽象是把某些看着长得不一样的东西，抽象成一个统一的模块，这个模块通过隐藏、变量配置，来达到具体的内容。
比如说底部按钮栏可抽象成一个横向列表。这个横向列表再抽象，横向列表和纵向列表都属于列表，设计模块的时候，通过配置选项，能让一个列表是横向还是纵向的，等于把这两个相似又不相同的抽象出一个叫做列表的东西。

---

css样式表设计

reset.scss：
浏览器不同，对默认的标签有默认的样式，为了表现统一化，要加一个这个。
layout.scss:
布局抽象成这个
element.scss:
列表、按钮

global的方式引用，比如说直接把某个模块引用进来，然后就可以写具体的样式了。
scope就是用的module方法。比如说两个组件都叫做.btn，这样在之前会导致两个样式的名称一致，会被覆盖，如果想用相同的名称，样式不一样，就要用css module这样就不一致，因为编译出来的class带了一串编码。

【关于模块化的css设计代码部分】

layout.scss

element.scss