TheLazy.Dev
Portfolio GitHub

Blog

css |tailwindcss |vite |nuxt

在Web工程中使用CSS级联层

tm-sunnyday

天木晴天

Posted on June 23, 2024

在Web工程中使用CSS级联层

CSS的全称是层叠样式表（Cascading Style Sheets），它的一个重要概念既是“层叠”，靠后声明的样式会覆盖前面的样式。这个特性使我们在开发新内容时，非常方便地在继承旧样式的同时做出一些微调。

随着前端开发的工程化，特别是Vue.js等框架的广泛使用，我们需要在项目中管理越来越多的碎片样式文件。当这些样式文件互相关联时，为了使它们在HTML文档中出现的顺序符合我们的预期，往往需要我们付出更多的精力。

好在，我们现在有了CSS级联层。

通过级联层，我们可以非常方便地归类CSS代码，使得层中的样式永远在逻辑上按我们想要的方式排序，而不用关心它们在HTML文档中出现的顺序。

CSS级联层已被确认为 Baseline 2022，您可以放心地使用这个特性。

理想的工程实践

原子设计（Atomic Design）是现代Web开发中常用的设计模式，我们可以按照这个设计，将样式层同样分为以下五层：

  1. Atoms（原子）
  2. Molecules（分子）
  3. Organisms（生物体）
  4. Templates（模板）
  5. Pages（页面）

在实际工程中您可能需要增减它们，如添加一个基础层用于在不同浏览器中规范初始样式（Reboot/Normalize），所以最终工程中的样式层可能是这样的：

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

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

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

只要我们保证HTML文档的最开始按照这个顺序定义层，我们就可以在之后的开发中直接将样式代码防止在层中而无需关系它们的被导入的先后顺序。

<!DOCTYPE html>
<html lang="en">
<head>
  <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="...">
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

与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;
}
Enter fullscreen mode Exit fullscreen mode

然后，我们调整一下级联层的定义：

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

与组件库结合使用

组件库是前端工程必不可少的部分，以上文为基础，我们可以很容易地想到，组件的样式应当在“base”层（或“tailwind-base”层）与“layout”层之间，也即“components”层中。至于它应该在components中的何处，这需要您结合实际情况来决定，我们可以利用子层的特性进行排序

然而，绝大多数组件库均没有使用级联层，直接导入组件库的样式会使它们出现在所有层之外，在级联层规则下，它们的样式将是最高优先级，我们无法使用tailwind或者其他方式覆盖它们的样式。

为了解决这个问题，我开发了一个postcss插件，它能够通过配置为导入的样式添加级联层。

接下来，以Vite项目为例，简单说明一下如何在工程中结合使用 element-plus 组件库。

初始化项目以及安装TailwindCSS和Element Plus的内容在此省略，无论您是否使用自动导入的方式引入Element Plus均可以按本文的方式操作。

首先，安装@web-baseline/postcss-wrap-up-layer，您可以选择您喜欢的包管理器：

yarn add -D @web-baseline/postcss-wrap-up-layer
Enter fullscreen mode Exit fullscreen mode

然后，在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',
            },
          ],
        }),
      ],
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

就是这样，这个插件将会为所有匹配到的文件添加设置的级联层，如果您使用其他的组件库，可以进行类似的设置。

在Vue SFC（单文件组件）中更方便地处理CSS级联层

在Vue的单文件组件中，我们可以使用<style></style>定义样式，我们可以直接在其中将样式包裹在级联层中，就像这样：

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

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

这不方便，也不美观。通常情况下，我们并不会关注样式在哪个层中，也不希望看到这个始终存在的缩进。因此，我也开发了一个vite插件，允许您以属性的形式（如：<style layer="layerName">）使用级联层。

安装@web-baseline/vite-plugin-vue-style-layer：

yarn add -D @web-baseline/vite-plugin-vue-style-layer
Enter fullscreen mode Exit fullscreen mode

在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(),
  ],
})
Enter fullscreen mode Exit fullscreen mode

这样，就可以将上文的组件改写成下面的样子：

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

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

我认为，这或许可以成为Vue SFC官方支持的功能，甚至是新的Web特性，将layer作为<style>和<link rel="stylesheet">的真正原生属性。

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

在Nuxt中使用级联层

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

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

yarn add -D @web-baseline/nuxt-css-layer
Enter fullscreen mode Exit fullscreen mode

在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',
    ],
  },
});
Enter fullscreen mode Exit fullscreen mode

结语

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

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

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

💖 💪 🙅 🚩
tm-sunnyday
天木晴天

Posted on June 23, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

在Web工程中使用CSS级联层
css 在Web工程中使用CSS级联层

June 23, 2024