Vue3 企業級優雅實戰 - 組件庫框架 - 4 組件庫的 CSS 架構

Vue3 企業級優雅實戰 – 組件庫框架 – 4 組件庫的 CSS 架構

2022 年 11 月 14 日
筆記
CSS架構, vue3, 前端, 架構

在前一篇文章中分享了搭建組件庫的基本開發環境、創建了 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 文件。

settings

settings 是一些變數的定義，在 packages/scss/base/ 目錄中創建 _var.module.scss 文件，該文件定義樣式變數。

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

:export {
  primaryColor: $primary-color;
}

Generic

Generic 通常是對瀏覽器樣式的重置，統一 HTML 標籤在不同瀏覽器中的展示，屏蔽瀏覽器間的差異。在這個部分可以使用開源庫normalize.css、reset.css 等。這一層可以在組件庫中省略，在各個具體的應用中引入對應css。不過程式設計師優雅哥還是將瀏覽器樣式重置引入到組件庫中，這樣應用開發過程中省點事。咱使用開源的 normalize.css 作為 Generic。normalize.css 的程式碼可以在 GitHub 上搜索獲取。

繼續在 packages/scss/base/ 目錄中創建 _normalize.scss 文件，將 normalize.css 的內容直接複製進去就可以了。

Base

Base 主要是存放部分重置樣式的自定義，如 html、body、section 等，這部分咱們暫時沒有自定義的內容，就無需編寫了。

入口文件

最後需要將 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'

（在上文中的程式碼已經包括這一句引入了）

到此便完成了組件庫樣式架構的搭建，整個樣式的目錄結構如下：

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支援一下，點贊、關注、收藏，程式設計師優雅哥會持續與大家分享更多乾貨

Tags: CSS架構 vue3 前端架構