Utilisation de couches en cascade CSS dans des projets Web-tutoriel CSS-php.cn

Utilisation de couches en cascade CSS dans des projets Web

Le nom complet du CSS est Feuilles de style en cascade. Un concept important est que les styles déclarés plus tard écraseront les styles précédents. Cette fonctionnalité nous permet d'effectuer des ajustements très pratiques tout en héritant de l'ancien style lors du développement de nouveaux contenus.

Avec l'ingénierie du développement front-end, notamment l'utilisation généralisée de frameworks tels que Vue.js, nous devons gérer des fichiers de style de plus en plus fragmentés dans le projet. Lorsque ces fichiers de style sont liés les uns aux autres, nous devons souvent faire plus d'efforts pour que l'ordre dans lequel ils apparaissent dans le document HTML réponde à nos attentes.

Heureusement, nous avons maintenant des Couches en cascade CSS.

En mettant en cascade les calques, nous pouvons catégoriser le code CSS très facilement, de sorte que les styles du calque soient toujours logiquement ordonnés comme nous le souhaitons, sans nous soucier de la façon dont ils apparaissent dans l'ordre du document HTML.

CSS Cascading Layers a été confirmé comme Baseline 2022, vous pouvez utiliser cette fonctionnalité en toute confiance.

pratique d'ingénierie idéale

Atomic Design est un modèle de conception couramment utilisé dans le développement Web moderne. Nous pouvons suivre cette conception et diviser la couche de style en cinq couches suivantes :

Atomes
Molécules
Organismes
Modèles
Pages

Dans les projets réels, vous devrez peut-être les augmenter ou les diminuer, par exemple en ajoutant une couche de base pour standardiser le style initial dans différents navigateurs (Redémarrer/Normaliser), de sorte que la couche de style dans le projet final puisse ressembler à ceci :

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

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

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

Copier après la connexion

Tant que nous nous assurons que les calques sont définis dans cet ordre au début du document HTML, nous pouvons directement placer le code de style dans le calque lors du développement ultérieur sans avoir à nous soucier de l'ordre dans lequel ils sont importés.



  <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="...">

Copier après la connexion

Utilisé conjointement avec TailwindCSS

À l'heure actuelle, la plupart des bibliothèques de composants combinées à TailwindCSS ajustent le style des composants via les classes d'outils de contrôle JS. Cet article ne discutera pas de cette méthode. TailwindCSS peut être combiné avec n'importe quelle bibliothèque de composants à l'aide de couches en cascade, ce qui nous permet d'utiliser tailwind pour affiner le style de la bibliothèque de composants.

TailWindCSS a déjà le concept de calques. Dans les versions antérieures à la version 4, des calques simulés sont toujours utilisés, et non de véritables calques en cascade. Afin de faire apparaître les styles TailwindCSS à la position appropriée dans nos projets, nous devons réécrire le fichier d'importation. :

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

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

Copier après la connexion

Ensuite, ajustons la définition de la couche cascade :

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

Copier après la connexion

Utiliser avec les bibliothèques de composants

La bibliothèque de composants est une partie essentielle du projet front-end. Sur la base de ce qui précède, on peut facilement penser que le style du composant doit se situer entre la couche "base" (ou "tailwind-base") et l'espace "mise en page", c'est-à-dire dans le calque "composants". Quant à l'endroit où il doit se trouver dans les composants, vous devez décider en fonction de la situation réelle. Nous pouvons utiliser les caractéristiques de la sous-couche pour trier

Cependant, la grande majorité des bibliothèques de composants n'utilisent pas le calque en cascade. L'importation directe des styles de la bibliothèque de composants les fera apparaître en dehors de tous les calques. Selon les règles des calques en cascade, leurs styles auront la plus haute priorité. Leurs styles ne peuvent pas être annulés par le vent arrière ou par d’autres moyens.

Pour résoudre ce problème, j'ai développé un plugin postcss qui peut ajouter des couches en cascade aux styles importés via la configuration.

Ensuite, prenez le projet Vite comme exemple pour expliquer brièvement comment utiliser la bibliothèque de composants element-plus dans le projet.

Le contenu de l'initialisation du projet et de l'installation de TailwindCSS et Element Plus est omis ici. Que vous utilisiez ou non l'importation automatique pour introduire Element Plus, vous pouvez suivre les étapes de cet article.

Tout d'abord, installez @web-baseline/postcss-wrap-up-layer, vous pouvez choisir votre gestionnaire de packages préféré :

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

Copier après la connexion

Ensuite, utilisez ce plugin dans le fichier 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',
            },
          ],
        }),
      ],
    },
  },
})

Copier après la connexion

Ça y est, ce plug-in ajoutera une couche de paramètres en cascade à tous les fichiers correspondants. Si vous utilisez d'autres bibliothèques de composants, vous pouvez définir des paramètres similaires.

Gestion plus pratique des couches en cascade CSS dans Vue SFC (Single File Component)

Dans le composant monofichier de Vue, nous pouvons utiliser pour définir des styles, où nous pouvons directement envelopper le style dans un calque en cascade, comme ceci :

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

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

Copier après la connexion

C'est gênant et pas joli. Normalement, nous ne prêtons pas attention au calque dans lequel se trouve le style et nous ne voulons pas voir cette indentation toujours présente. Par conséquent, j'ai également développé un plug-in vite qui permet d'utiliser des calques en cascade sous forme d'attributs (tels que :

Installez @web-baseline/vite-plugin-vue-style-layer :

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

Copier après la connexion

Utilisez ce plugin dans le fichier 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(),
  ],
})

Copier après la connexion

De cette façon, le composant ci-dessus peut être réécrit comme suit :

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

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

Copier après la connexion

我认为，这或许可以成为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

Copier après la connexion

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

Copier après la connexion