Web プロジェクトでの CSS カスケードレイヤーの使用-CSSチュートリアル-php.cn

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',
    ],
  },
});

ログイン後にコピー