# 经典水果&水果拼盘——css 的快乐水

# §1、概述

css，学名层级样式表，顾名思义，样式层层叠加的表。严格来说，css 不属于编程的范畴，只是层级样式的排列组合。所以，我们能操纵的，就是它的排列组合方式。

# §2、组合方式：经典水果 vs 水果拼盘

# §2.1、水果拼盘

我们常用的方式，是将样式组合好在一个类名中，dom 节点引用单一类名，就像把水果切成拼盘，直接食用。这种水果拼盘的组合方式，优点自不必说，那么问题在哪里呢？

1、命名头疼，俩果盘水果种类差不多，更头疼！

2、保质期短，新鲜拼出来的，还能卖个好价，还能将名字和果盘和买家对上号，时间一长三脸懵逼，无人问津，弃之可惜！

3、所以，最恐怖的是维护，水果拼盘不知道被卖给多少家，若是已经卖给了许多家，那改了拼盘里的水果，其他买家不买账，岂不赔大发了？

# §2.2、经典水果 —— 一年四季都畅销的水果

若完全经典水果，即完全引用经典样式（原子样式或分子样式），在 dom 节点处多类名组合，即不单独切水果了，而是在吃的时候直接处理，这样做，有什么好处，又有什么弊端呢？

1、好处：

保质期为永久。
苹果就是苹果，西瓜就是西瓜，很底层，用途很单一，命名自然也很简单，再不用为起什么名字愁白了头，效率起码提高 50%。
解耦合！试想一下，一个个性化 div，只有一个地方用到，通过经典样式类在 dom 节点就地组合去实现 class=”xxx xxx xxx”，将来若删除这个 div 节点，或者改变另一种风格了，那么只需要改动该 div 自身即可，丝毫不影响别的节点，更不需要删除 css 文件中冗余的水果拼盘代码，做到解耦合。

2、弊端：

试想一下，若这个 div，写了一长串的类名，然后用于很多地方，突遇改版，设计把这个 div 的风格改了，那我们是不是每个 div 都要改一遍，累不累？

# §3、取长补短

由此已看出两者是欢喜冤家，天生的一对！两者该怎么取长补短，做到既能解耦合，又方便维护呢，大家应该都有想法了。

1、先回顾一下可以单独使用的场景

水果拼盘：用于重复使用的控件样式。
经典水果：用于个性化定制的样式。

2、更多的场景需要两者结合

按钮等控件：位置采用经典水果 margin 等，核心采用水果拼盘。
作为容器的节点：布局用经典水果 flex padding 等，边框阴影等共性的样式用水果拼盘。

# §4、具体实践方案

可参考项目：tesla-ui demo

一个项目的样式目录，取名 sass，只需包含四个文件：global.scss、variable.scss、main.scss 以及 sass_index.scss。 目录如下：

├─sass
  ├─global.scss
  ├─icon.scss
  ├─main.scss
  ├─reset.scss
  ├─sass_index.scss
  ├─variable.scss

# §4.1、global.scss

# 1、概述

经典水果样式，任意项目皆可引用
该文件涉及盒模型 padding、margin，布局 flex，定位 position 等等一些基础的，使用率最高的原子、分子样式。
此文件拓展性良好，大家经常使用的经典样式，只要保持队形，就能加入进来

ps：这个文件需统一维护，暂时还是每个项目各自引入，之后可以改进一下统一维护

# 2、global.scss 命名的几个原则

直接根据属性和值命名，原则采用中划线，个别特殊的采用驼峰（在下文一些特殊的命名中介绍）
属性值辨识度高的，直接采用属性值命名如 .bold .inline-block，根据属性值无法区分的加上属性名如 .float-right .visibility-hidden
数字（无论正负）紧跟属性，单位有两个：自定义单位 $unit 和百分比 %，根据属性自行区分，很简单，如 .border1($unit) .width100(%)

# 3、一些特殊的命名

作为所有项目通用的全局样式，样式基本顾名思义，搜索关键词即可查找，以下介绍几个相对特别的：

驼峰命名的样式：

.margin10X ~ .margin100X

.marginX10 ~ .marginX100、.marginXauto

.padding10X ~ .padding100X

.paddingX10 ~ .paddingX100

.translateX, .translateY, .translateXY

清除浮动的全局样式为 .clear { overflow: hidden }
单行省略号用.line-ellipsis；多行省略号用 .line-limited2 .line-limited3 ...
.font-size0 是项目基准字体大小（自定义，默认 14px），.font-sizen 是基准字体加 n 个单位、.font-size-n 是基准字体减 n 个单位。这样处理的目的是，若整个项目字体需放大或缩小，只需改基准字体，所有字体就会同步变化

# §4.2、reset.scss

存放该项目的初始化样式

# §4.3、variable.scss

存放该项目的变量，注意，是供该项目用的，色值等变量都可以放在这里。理想状态是：如果有改主题色值的需求，只需要改动这个文件即可。

# §4.4、icon.scss

存放该项目的 /images/icon 文件夹下对应的.png 类型的图标样式

# §4.5、main.scss

看上去是组件的模块（如搜索框），或重复的模块（如相同的列表），第一时间写成组件页面，便于后面的开发和维护。避免在 main.scss 写这一类的冗余样式，main.scss 主要用于存放以下样式：

初始化样式
该项目跨页面使用的水果拼盘样式。即一些基础的控件核心，比如按钮、图标等分布在各处的统一风格的样式。
那么同一个页面的水果拼盘呢，当然可以在单个页面中，用 <style lang="scss" scoped></style> 引入

# §4.6、sass_index.scss

引入其他三个 scss 文件，统一输出

# §5、赘述一下，这样统一样式编码风格之后，有什么好处。

1、跨项目无缝嫁接！

想象一下，一个组件页面，在 A 项目里不断打磨完善好了，当 B 项目要用的时候，需要怎么做，一般情况下，除了 copy 该组件页面，多多少少还牵扯一些全局样式等 vue 页面之外的种种琐碎的东西，可是用了以上方案，就只需要一键 copy 组件页面，再无后顾之忧，爽不爽！

2、耦合度低，大大降低维护成本！毕竟一个项目 80%在于维护。

3、解放为 css 命名愁白了头的烦恼，从此可以快乐无忧地，飞一般的写页面！

4、可读性强，团队开发，零障碍！

还有很多，在开发中慢慢去体会吧~