Web プロジェクトでの CSS カスケード レイヤーの使用

CSS の正式名は Cascading Style Sheets です。その重要な概念は、後で宣言されたスタイルが以前のスタイルを上書きすることです。この機能により、新しいコンテンツを開発する際に、古いスタイルを継承しながら微調整を行うことができ、非常に便利です。

フロントエンド開発のエンジニアリング、特に Vue.js などのフレームワークの普及に伴い、プロジェクト内でますます断片化されたスタイル ファイルを管理する必要があります。これらのスタイル ファイルが相互に関連している場合、多くの場合、HTML ドキュメント内でのスタイル ファイルの表示順序を期待どおりにするために、より多くの労力を費やす必要があります。

ありがたいことに、CSS カスケード レイヤー が使えるようになりました。

レイヤーをカスケードすることにより、CSS コードを非常に便利に分類できるため、レイヤー内のスタイルは、HTML ドキュメントの順序でどのように表示されるかを気にすることなく、常に希望どおりに 論理的に 並べられるようになります。

CSS Cascading Layers は Baseline 2022 として確認されており、この機能を安心して使用できます。

理想的なエンジニアリング実践

アトミック デザイン は、現代の Web 開発で一般的に使用されるデザイン パターンであり、このデザインに従い、スタイル レイヤーを次の 5 つのレイヤーに分割できます。

原子
分子
生物
テンプレート
ページ

実際のプロジェクトでは、さまざまなブラウザで初期スタイルを標準化するためにベース レイヤーを追加する (再起動/正規化) など、スタイル レイヤーを増減する必要がある場合があります。そのため、最終プロジェクトのスタイル レイヤーは次のようになります。

/* 规范基础样式、定义CSS自定义属性等 */
@layer base { /* ... */ }

/* 我们可以借助子层来排序这些可重用组件的样式 */
@layer components.atoms { /* ... */ }
@layer components.molecules { /* ... */ }
@layer components.organisms { /* ... */ }

/* 模板可以被归类到布局中 */
@layer layouts { /* ... */ }
@layer pages { /* ... */ }

HTML ドキュメントの先頭でレイヤーがこの順序で定義されていることを確認していれば、インポートされる順序を気にすることなく、後続の開発でスタイル コードをレイヤーに直接配置できます。

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在定义层时，可以用简写 -->
  <style>@layer base, components.atoms, components.molecules, components.organisms, layouts, pages;</style>
  <!-- 实际的样式代码从这里之后导入 -->
  <style>/* ... */</style>
  <link rel="stylesheet" href="...">

TailwindCSS と組み合わせて使用​​されます

現在、TailwindCSS と組み合わせたコンポーネント ライブラリのほとんどは、JS コントロール ツール クラスを通じてコン​​ポーネントのスタイルを調整します。この記事では、この方法については説明しません。 TailwindCSS は、カスケード レイヤーを利用して任意のコンポーネント ライブラリと組み合わせることができ、tailwind を使用してコンポーネント ライブラリのスタイルを微調整することができます。

TailWindCSS にはすでにレイヤーの概念があります。バージョン 4 より前のバージョンでは、実際のカスケード レイヤーではなく、シミュレートされたレイヤーが引き続き使用されます。TailwindCSS スタイルをプロジェクト内の適切な位置に表示するには、インポートを書き直す必要があります。ファイル:

/*
 * "base"这个层名会被TailwindCSS当作它的逻辑层处理，
 * 此处我们使用"tailwind-base"代替
 */
@layer tailwind-base {
  @tailwind base;
}

/*
 * "utilities"和"variants"同理，
 * 但我们无需定义两个层来包裹它们，因为它们始终应该定义在我们的样式之后
 */
@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
}

次に、カスケード層の定義を調整しましょう:

/*
 * 注意！我在此处删除了前文中的base层，
 * tailwind的base已经包含了样式的规范化内容，
 * 我们的工程通常不需要再次格式化
 */
@layer
  tailwind-base,
  components.atoms,
  components.molecules,
  components.organisms,
  layouts,
  pages,
  tailwind-utilities;

コンポーネントライブラリと併用する

コンポーネント ライブラリはフロントエンド プロジェクトの重要な部分です。上記に基づいて、コンポーネントのスタイルは「base」レイヤー (または「tailwind-base」レイヤー) と「tailwind-base」レイヤーの間にある必要があると簡単に考えることができます。 「レイアウト」レイヤー、つまり「コンポーネント」レイヤー内。コンポーネント内のどこに配置するかについては、実際の状況に基づいて決定する必要があります。

をソートするためにサブレイヤーの特性を使用できます。

ただし、コンポーネント ライブラリの大部分はカスケード レイヤーを使用しません。コンポーネント ライブラリのスタイルを直接インポートすると、そのスタイルがすべてのレイヤーの外側に表示されます。これらのスタイルは、追い風やその他の手段を使用してオーバーライドすることはできません。

この問題を解決するために、構成を通じてインポートされたスタイルにカスケード レイヤーを追加できる postcss プラグインを開発しました。

次に、Vite プロジェクトを例として、プロジェクト内でエレメント プラス コンポーネント ライブラリを使用する方法を簡単に説明します。

プロジェクトの初期化、TailwindCSS と Element Plus のインストールの内容はここでは省略します。Element Plus の導入に自動インポートを使用するかどうかに関係なく、この記事の手順に従うことができます。

まず、@web-baseline/postcss-wrap-up-layer をインストールします。好みのパッケージ マネージャーを選択できます。

yarn add -D @web-baseline/postcss-wrap-up-layer

次に、vite.config.ts ファイルでこのプラグインを使用します:

/* 这里省略了其他无关的配置内容 */

import WrapUpLayer from '@web-baseline/postcss-wrap-up-layer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        WrapUpLayer({
          rules: [
            {
              /* 此处使用了正则进行匹配 */
              includes: /^node_modules\/element-plus\//,
              layerName: 'components.element-plus',
            },
          ],
        }),
      ],
    },
  },
})

このプラグインは、一致するすべてのファイルに設定のカスケード レイヤーを追加します。他のコンポーネント ライブラリを使用する場合も、同様の設定を行うことができます。

Vue SFC (シングル ファイル コンポーネント) での CSS カスケード レイヤーのより便利な処理

Vue の単一ファイル コンポーネントでは、 を使用してスタイルを定義でき、次のようにスタイルをカスケード レイヤーに直接ラップできます。

<template>
  <h2 class="title">Title</h2>
</template>

<style scoped>
@layer components.atoms {
  .title {
    font-size: 3rem;
  }
}
</style>

これは不便で、あまり美しくありません。通常、私たちはスタイルがどのレイヤーにあるかには注意を払いませんし、常に存在するこのインデントを見たくないのです。したがって、属性 ( など) の形式でカスケード レイヤーを使用できるようにする vite プラグインも開発しました。

@web-baseline/vite-plugin-vue-style-layer をインストールします:

yarn add -D @web-baseline/vite-plugin-vue-style-layer

vite.config.ts ファイルでこのプラグインを使用します:

/* 这里省略了其他无关的配置内容 */

import Vue from '@vitejs/plugin-vue';
import VueStyleLayer from '@web-baseline/vite-plugin-vue-style-layer';

export default defineConfig({
  plugins: [
    Vue(),
    VueStyleLayer(),
  ],
})

このようにして、上記のコンポーネントは次のように書き換えることができます:

<template>
  <h2 class="title">Title</h2>
</template>

<style scoped layer="components.atoms">
.title {
  font-size: 3rem;
}
</style>

我认为，这或许可以成为Vue SFC官方支持的功能，甚至是新的Web特性，将layer作为

这个Vite插件目前已经满足了使用的需要，但我知道它还有些许不足之处，我正在考虑将其使用 unplugin 重构，以支持更多的框架，而不仅仅是Vite+Vue。

在Nuxt中使用级联层

我通常使用Nuxt进行Web开发，而以上的功能在Nuxt中配置需要分散在各处，因此我将它们合并为一个模块以集中配置。由于Nuxt并不公开HTML文档的编辑，我在模块中添加了级联层排序字段。

安装@web-baseline/nuxt-css-layer：

yarn add -D @web-baseline/nuxt-css-layer

在nuxt.config.ts文件中使用这个模块：

/* 这里省略了其他无关的配置内容 */
export default defineNuxtConfig({
  modules: [
    '@web-baseline/nuxt-css-layer',
    '@nuxtjs/tailwindcss',
    '@element-plus/nuxt',
  ],
  cssLayer: {
    rules: [
      {
        includes: /^node_modules\/element-plus\//,
        layerName: 'components.element-plus',
      },
    ],
    cssLayerOrder: [
      'tailwind-base',
      'components.element-plus',
      'components.atoms',
      'components.molecules',
      'components.organisms',
      'layouts',
      'pages',
      'tailwind-utilities',
    ],
  },
});

结语

在CSS级联层的帮助下，我们可以方便的在大型项目中管理样式文件，同时也允许我们将TailwindCSS与那些传统的组件库结合使用。

感谢您的阅读，如果您觉得我的工作对您有所帮助，欢迎为我的仓库添加Star！

• @web-baseline/postcss-wrap-up-layer
• @web-baseline/vite-plugin-vue-style-layer
• @web-baseline/nuxt-css-layer

如果您在使用的过程中发现任何问题，欢迎提出issue以及提出pr！

以上がWeb プロジェクトでの CSS カスケード レイヤーの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。