[Yuanchuang Essay Competition] Vue3 エンタープライズレベルの優雅さの実践 - コンポーネントライブラリフレームワーク - コンポーネントライブラリの 4 つの CSS アーキテクチャ

このシリーズの記事は更新されました:
開発効率を向上させる実用的な vite + vue3 コンポーネントライブラリスキャフォールディングツールを共有するすぐに使える
 yyg-cli スキャフォールディング: vue3 コンポーネントライブラリと vue3 ファミリーバケットプロジェクトを迅速に作成する
 Vue3 エンタープライズレベルのエレガンス実践 - コンポーネントライブラリフレームワーク - 1 pnpm monorepo の構築
 Vue3 エンタープライズレベルの優雅さの実践 - コンポーネントライブラリフレームワーク - 2 workspace-root の初期化
 Vue3 エンタープライズレベルの優雅さの実践 - コンポーネントライブラリフレームワーク - 3 コンポーネントライブラリ開発環境の構築

前回の記事ではコンポーネントライブラリを構築するための基本的な開発環境を共有し、fooコンポーネントモジュールとコンポーネントライブラリエントリモジュールを作成しましたが、この記事ではコンポーネントライブラリのスタイルアーキテクチャ設計を共有します。

1 一般的な CSS アーキテクチャパターン

一般的な CSS アーキテクチャパターンは多数あります: OOCSS、ACSS、BEM、SMACSS、ITCSSなど。その中でもSMACSSとITCSSは非常に似ています。私がエンタープライズレベルのプロジェクトで最も頻繁に使用するのはITCSS + BEM + ACSSの簡易版であるため、この記事では最初にこれら 3 つのモードを紹介します。他のモードはオンラインで確認できます。

1.1 ACSS

ACSS モードは、ほぼスタイルクラスに対応するスタイル属性です。この方法は非常に柔軟性があり、再利用性が高く、メンテナンスコストが低いですが、CSS 命名のセマンティクスを破壊します。一般的な名前には、d-flex、m-10、w-20 などがあります。

1.2 ウェル

BEM パターンは命名方法論であり、その命名階層はブロックBロック、要素Element、モディファイアModifierであり、これが「BEM」という名前の由来でもあります。次の HTML フラグメントと対応するクラス名のように、要素 Element は 2 つの短いアンダースコア (__) を使用し、修飾子 Modifier は 2 つの短いダッシュ (-) を使用します。

<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 は、合計 7 レベルのスタイル階層構造であり、上から下まで 7 つのレベルは次のとおりです。

設定レイヤー: 通常、一般的な色の値、フォントサイズなどを定義する値などのいくつかのスタイル変数。
ツールレイヤー: ミックスイン、関数などを含む一般的なツール機能。
汎用レイヤー: 一般的な基本スタイル。通常は、normalize.css、リセット、その他のライブラリなど、ブラウザーのデフォルトスタイルをリセットします。
ベースレイヤー: ページ設定、UL タグ設定など、グローバルに使用されるいくつかの要素に対して共通のカスタマイズされたスタイルを実行します。
オブジェクト層: OOCSS が使用されるすべての場所、つまり、特定の構造とスタイルによって分離された特別なクラス。
コンポーネント層: 特定のコンポーネントは、コンポーネントライブラリ内の各コンポーネントに実際に対応できます。
トランプレイヤー: 幅を 100px にリセットするなど、一部のスタイルを書き換えると、ACSS と同様に最大の重みを持つ DOM 要素の特定の小さな領域にのみ影響しますが、通常は ! important が追加されます。

2 コンポーネントライブラリのCSSアーキテクチャ

ITCSS の階層化は非常に詳細であり、コンポーネントライブラリのスタイルはそれに基づいて単純化されており、ベースレイヤーまたはオブジェクトレイヤーが省略されています。トランプ層では代わりに ACSS を使用し、コンポーネント層では各コンポーネントが内部で BEM を使用します。したがって、コンポーネントライブラリのスタイルアーキテクチャは、ITCSS + BEM + ACSS の簡易バージョンとなります。

2.1 CSS構造の概要

コンポーネントライブラリのスタイルはプリプロセッサSCSSを使用しており、全体の構造から以下のレベルに分かれています。

ベースレイヤー: CSS 構造全体の最も基本的なレベル。ITCSSの設定、汎用、およびベースに対応します。これには、変数定義、共通の基本スタイル、およびカスタマイズされた基本スタイルが含まれます。
ツール層: ITCSSツールと同様に、一般的なツール機能を提供します。
acss層: ITCSSのトランプと同様に、flex、margin、padding 関連のスタイル基本クラスなど、いくつかのアトミックスタイルクラスを定義します。
コンポーネント層: ITCSS のコンポーネントと同様に、各コンポーネントのスタイルを実装し、BEMメソッドを使用して各コンポーネントのスタイルを整理し、名前を付けます。

2.2 ベースレイヤーの実装

前述したように、ベースレイヤにはスタイル変数定義、共通の基本スタイル、およびカスタマイズされた基本スタイルが含まれます。

まず、packages/scssディレクトリにベースディレクトリを作成し、ベースレイヤーの scss ファイルを保存します。

設定

設定はいくつかの変数の定義であり、packages/scss/base/ディレクトリにスタイル変数を定義する_var.module.scssファイルを作成します。

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

:export {
  primaryColor: $primary-color;
}

ジェネリック

ジェネリックは通常、ブラウザーのスタイルをリセットし、異なるブラウザーでの HTML タグの表示を統一し、ブラウザー間の違いを保護します。この部分では、オープンソースライブラリのnormalize.css、reset.cssなどを使用できます。このレイヤーはコンポーネントライブラリで省略でき、対応する CSS を特定のアプリケーションごとに導入できます。しかし、プログラマの Elegant Brother は、コンポーネントライブラリにブラウザスタイルリセットを導入し、アプリケーション開発プロセスでのトラブルを軽減しました。オープンソースのNormalize.css をGenericとして使用します。Normalize.cssのコードはGitHub にあります。

引き続き、packages/scss/base/ディレクトリに_normalize.scssファイルを作成し、normalize.cssの内容をそのファイルに直接コピーします。

ベース

Base は主に、HTML、本文、セクションなどのいくつかのカスタムリセットスタイルを保存します。この部分にはまだカスタムコンテンツがないため、記述する必要はありません。

エントリーファイル

最後に、ベース層のすべての scss は、統一された入り口から導入される必要があります。package/scss/base/ディレクトリにindex.scssを作成します。このファイルは、上で作成した 2 つの scss ファイルをインポートします。

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

2.3 ツール層の実装

ツールレイヤーは、ツール関数とミックスインを保存するために使用されます。github に優れたオープンソースプロジェクトsassMagicがあります。これをツールレイヤーとして使用します。

プロジェクトの src 内のコードをpackage/scss/tools/ディレクトリにコピーするだけです (_sassMagic.scss ファイルにエラーがある場合は、存在しないファイルの先頭部分を削除するだけです)。ここで _sassMagic.scss ファイルの名前をIndex.scssに変更します。これにより、後で使用するときに@use ".../tools"を使用するだけで済みます。

2.4 acss層の実装

acss レイヤーはいくつかのアトミックスタイルを定義するために使用されます。ここでは、フレックスレイアウトとマージン/パディングのアトミッククラスを定義します。

package/scss/にacssディレクトリを作成し、このディレクトリに_flex.scssと_mp.scssという 2 つのファイルを作成します。

パッケージ/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;
}

パッケージ/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 コンポーネント層の実装

コンポーネントレイヤーは、コンポーネントライブラリ内の特定の各コンポーネントのスタイルに対応します。package/scssにディレクトリコンポーネントを作成します。まず、前の記事で作成したfooコンポーネントのスタイルを作成します。package/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ファイルを作成します。これにより、コンポーネントディレクトリ内のすべてのコンポーネントの scss ファイルが導入されます。

@use "foo.module";

別のコンポーネントを追加する場合は、コンポーネントディレクトリにコンポーネントのスタイルファイルを作成し、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'

(上記のコードにはこの文が含まれています)

この時点で、コンポーネントライブラリスタイルアーキテクチャの構築が完了し、スタイル全体のディレクトリ構造は次のようになります。

ここに画像の説明を挿入します

この記事を読んでいただきありがとうございます。この記事が少しでも役に立ったり、インスピレーションになった場合は、いいね、フォロー、集めて三回連続で応援してください。プログラマーエレガントブラザーは今後もより有益な情報を皆さんに共有していきます。