关于前端:Vue3-企业级优雅实战-组件库框架-4-组件库的-CSS-架构

在前一篇文章中分享了搭建组件库的根本开发环境、创立了 foo 组件模块和组件库入口模块，本文分享组件库的款式架构设计。

1 常见的 CSS 架构模式

常见的 CSS 架构模式有很多：OOCSS、ACSS、BEM、SMACSS、ITCSS 等，其中 SMACSS 和 ITCSS 很类似。我在企业级我的项目中最常应用的是简化版的 ITCSS + BEM + ACSS，所以本文首先介绍这三种模式，其余模式大家本人上网查看。

1.1 ACSS

ACSS 模式简直是一个款式属性就对应了一个款式类。这种形式非常灵活，复用性很强、保护成本低，但毁坏了 CSS 命名语义化。常见的名称如：d-flex、m-10、w-20 等。

1.2 BEM

BEM 模式是一种命名方法论，其命名层级为： 块 Block、 元素 Element、 修饰符 Modifier，这也是“BEM”这个名字的由来。元素 Element 应用两个短下划线（__），修饰符 Modifier 应用两个短中划线（–），如上面的 HTML 片段和对应的类名：

<div class="demo-block">
  <a class="demo-block__element1">Link</a>
  <a class="demo-block__element1 demo-block__element1--modifier">Link</a>
</div>

<style>
  .demo-block {} // 块
    .demo-block__element1 {} // 元素
    .demo-block__element1--modifier1 {} // 修饰符
</style>

应用 BEM 能够标准命令，页面构造也比拟清晰。

1.3 ITCSS

ITCSS 是一种款式的分层构造，一共有七层，七个档次从上到下顺次为：

• Settings 层：通常是一些款式变量，如定义通用的色彩值、字体大小的数值等；
• Tools 层：通用工具函数，包含 mixins、function 等；
• Generic 层：通用根底款式，个别是对浏览器默认款式进行重置，如 normalize.css、resets 等库；
• Base 层：对某些全局应用的元素进行通用的定制化款式，如页面的设置、ul 标签的设置等；
• Objects 层：所有应用 OOCSS 的中央，即某些构造和款式相拆散的专用类；
• Components 层：具体的组件，其实能够对应到组件库中的每个组件；
• Trumps 层：重写某些款式，如 width 从新设置为 100px，只会影响某一小块的 DOM 元素，权重最高，相似 ACSS，但通常会加上 !important。

2 组件库的 CSS 架构

ITCSS 分层十分粗疏，咱们组件库的款式在其根底上进行了简化，省略了 Base 层 或 Objects 层。而对于 Trumps 层，咱应用 ACSS 来代替，对于 Components 层，外面的每个组件外部又应用 BEM。所以咱们组件库的款式架构为：简化版的 ITCSS + BEM + ACSS。

2.1 CSS 构造概览

组件库的款式应用预处理器 SCSS，从构造整体来看，分为如下层级：

• base 层：整个 CSS 构造的最根底的层级，对应了 ITCSS 的 Settings、Generic 和 Base。即包含变量定义、通用根底款式和定制根底款式。
• tools 层：与 ITCSS 的 Tools 一样，提供通用工具函数。
• acss 层：相似 ITCSS 的 Trumps，定义一些原子款式类，如 flex、margin、padding 相干的款式根底类。
• components 层：与 ITCSS 的 Components 一样，实现各个组件的款式，其中每个组件的款式又应用 BEM 形式来组织命名。

2.2 base 层的实现

后面说过，base 层包含款式变量定义、通用根底款式、定制根底款式。

首先在 packages/scss 目录下创立 base 目录，寄存 base 层的 scss 文件。

1. settings

settings 是一些变量的定义，在 packages/scss/base/ 目录中创立 _var.module.scss 文件，该文件定义款式变量。

$primary-color: #488019;
$common-padding: 20px;

:export {primaryColor: $primary-color;}

2. Generic

Generic 通常是对浏览器款式的重置，对立 HTML 标签在不同浏览器中的展现，屏蔽浏览器间的差别。在这个局部能够应用开源库 normalize.css、reset.css 等。这一层能够在组件库中省略，在各个具体的利用中引入对应 css。不过程序员优雅哥还是将浏览器款式重置引入到组件库中，这样利用开发过程中省点事。咱应用开源的 normalize.css 作为 Generic。normalize.css 的代码能够在 GitHub 上搜寻获取。

持续在 packages/scss/base/ 目录中创立 _normalize.scss 文件，将 normalize.css 的内容间接复制进去就能够了。

3. Base

Base 次要是寄存局部重置款式的自定义，如 html、body、section 等，这部分咱们临时没有自定义的内容，就无需编写了。

4. 入口文件

最初须要将 base 层所有 scss 以对立的入口引入。在 packages/scss/base/ 目录下创立 index.scss，该文件导入下面创立的两个 scss 文件：

@use "var.module";
@use "normalize";

2.3 tools 层的实现

tools 层用于寄存工具函数和 mixins，github 上有个优良的开源我的项目 sassMagic，咱们就应用它作为 tools 层。

将该我的项目 src 中的代码拷贝到 packages/scss/tools/ 目录下即可（如果 _sassMagic.scss 文件中有报错，将外面对不存在文件的引入删除即可）。我在这里将 _sassMagic.scss 文件重命名为 index.scss，这样前面在应用时只须要应用 @use “../tools” 即可。

2.4 acss 层的实现

acss 层用于定义一些原子款式，这里咱们定义 flex 布局和 margin/padding 的原子类。

在 packages/scss/ 中创立目录 acss，并在该目录下创立两个文件：_flex.scss 和 _mp.scss。

packages/scss/acss/_flex.scss：

.f {display: flex;}
.f-c {
  display: flex;
  flex-direction: column;
}
.f-r {
  display: flex;
  flex-direction: row;
}
.f-1 {flex: 1 1 0;}
.oy-h {overflow-y: hidden;}
.oy-a {overflow-y: auto !important;}
.ox-h {overflow-x: hidden;}
.o-h {overflow: hidden;}

packages/scss/acss/_mp.scss：

$direction: (l left, r right, t top, b bottom);

@for $i from 1 through 30 {
  @each $type in m, p, v, h, a {
    // margin
    @if ($type == m) {
      @each $d in $direction {.m#{nth($d, 1)}-#{$i} {margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // padding
    @else if ($type == p) {
      @each $d in $direction {.p#{nth($d, 1)}-#{$i} {padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // margin/padding left/right
    @else if ($type == h) {.ph-#{$i} {padding-left: #{$i}px;
        padding-right: #{$i}px;
      }
      .mh-#{$i} {margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }
    // margin/padding top/bottom
    @else if ($type == v) {.mv-#{$i} {margin-top: #{$i}px;
        margin-bottom: #{$i}px;
      }
      .pv-#{$i} {padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
    }

    // all
    @else {.pa-#{$i} {padding: #{$i}px;
      }
    }
  }
}

2.5 components 层的实现

components 层对应组件库中每个具体组件的款式。在 packages/scss 中创立目录 components。首先为上一篇文章中创立的 foo 组件创立款式：在 packages/scss/components/ 目录下创立 _foo.module.scss 文件：

@import "../tools";
@import "../acss/mp";
@import "../base/var.module";

@include b('yyg-foo') {
  color: $primary-color;

  @include e('description') {
    color: #333333;
    @extend .mv-20;
  }
}

持续在 packages/scss/components/ 目录下创立 index.scss 文件，该文件中引入 components 目录下所有组件的 scss 文件：

@use "foo.module";

如果新增了其余组件，须要在 components 目录下创立该组件的款式文件，并在 components/index.scss 中引入该 scss 文件。

2.6 款式入口

在 packages/scss 下创立 index.scss，在外面导入所有的 scss，应用组件库时只须要引入该文件即可。

@import "./acss/flex";
@import "./base";
@import "./components";

3 在组件库中引入款式

最初只须要在组件库中引入 scss/index.scss 即可。在组件库的入口模块 packages/yyg-demo-ui/index.ts 中引入 index.scss：

import '../scss/index.scss'

（在上文中的代码曾经包含这一句引入了）

到此便实现了组件库款式架构的搭建，整个款式的目录构造如下：

packages/
|- scss/
        |- acss/
                |- _flex.scss
                |- _mp.scss
        |- base/
                |- _normalize.scss
                |- _var.module.scss
                |- index.scss
        |- components/
                |- _foo.module.scss
                |- index.scss
        |- tools/
                |- functions/
                |- mixins/
                |- index.scss
        |- index.scss