Menggunakan Lapisan Lata CSS dalam Projek Web

Nama penuh CSS ialah Cascading Style Sheets Konsep pentingnya ialah "cascading Styles diisytiharkan kemudian akan menimpa gaya sebelumnya. Ciri ini menjadikannya sangat mudah untuk kami membuat beberapa penalaan halus sambil mewarisi gaya lama semasa membangunkan kandungan baharu.

Dengan kejuruteraan pembangunan bahagian hadapan, terutamanya penggunaan meluas rangka kerja seperti Vue.js, kami perlu mengurus lebih banyak fail gaya berpecah-belah dalam projek. Apabila fail gaya ini berkaitan antara satu sama lain, kita selalunya perlu membayar lebih banyak usaha untuk membuat susunan ia muncul dalam dokumen HTML memenuhi jangkaan kita.

Syukurlah, kami kini mempunyai Lapisan Lata CSS.

Dengan melata lapisan, kita boleh mengkategorikan kod CSS dengan sangat mudah, supaya gaya dalam lapisan sentiasa logik disusun mengikut cara yang kita mahu, tanpa mempedulikan cara ia muncul dalam susunan dokumen HTML.

Lapisan Cascading CSS telah disahkan sebagai Baseline 2022, anda boleh menggunakan ciri ini dengan yakin.

amalan kejuruteraan yang ideal

Reka Bentuk Atom ialah corak reka bentuk yang biasa digunakan dalam pembangunan web moden Kita boleh mengikut reka bentuk ini dan membahagikan lapisan gaya kepada lima lapisan berikut:

1. Atom
2. Molekul
3. Organisme
4. Templat
5. Halaman

Dalam projek sebenar, anda mungkin perlu menambah atau mengurangkannya, seperti menambah lapisan asas untuk menyeragamkan gaya awal dalam pelayar yang berbeza (But Semula/Normalkan), jadi lapisan gaya dalam projek akhir mungkin kelihatan seperti ini:

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

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

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

Selagi kami memastikan lapisan ditakrifkan dalam susunan ini pada permulaan dokumen HTML, kami boleh terus meletakkan kod gaya dalam lapisan dalam pembangunan seterusnya tanpa perlu risau tentang susunan ia diimport.

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

Digunakan bersama TailwindCSS

Pada masa ini, kebanyakan perpustakaan komponen digabungkan dengan TailwindCSS melaraskan gaya komponen melalui kelas alat kawalan JS Artikel ini tidak akan membincangkan kaedah ini. TailwindCSS boleh digabungkan dengan mana-mana pustaka komponen dengan bantuan lapisan melata, membolehkan kami menggunakan tailwind untuk memperhalusi gaya pustaka komponen.

TailWindCSS sudah mempunyai konsep lapisan Dalam versi sebelum versi 4, lapisan simulasi masih digunakan, bukan lapisan lata sebenar Untuk menjadikan gaya TailwindCSS muncul dalam kedudukan yang sesuai dalam projek kami, kami Perlu menulis semula import. fail:

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

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

Kemudian, mari laraskan takrifan lapisan lata:

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

Gunakan dengan perpustakaan komponen

Pustaka komponen ialah bahagian penting dalam projek bahagian hadapan Berdasarkan perkara di atas, kita boleh dengan mudah berfikir bahawa gaya komponen harus berada di antara lapisan "asas" (atau lapisan "tailwind-base") dan. lapisan "susun atur", iaitu dalam lapisan "komponen". Mengenai di mana ia sepatutnya berada dalam komponen, anda perlu membuat keputusan berdasarkan situasi sebenar Kita boleh menggunakan ciri-ciri sub-lapisan untuk mengisih

Walau bagaimanapun, sebahagian besar pustaka komponen tidak menggunakan lapisan bertingkat Mengimport gaya pustaka komponen secara langsung akan menyebabkan mereka muncul di luar semua lapisan Di bawah peraturan lapisan bertingkat, gaya mereka akan mempunyai keutamaan tertinggi Gaya mereka tidak boleh ditindih menggunakan tailwind atau cara lain.

Untuk menyelesaikan masalah ini, saya membangunkan pemalam postcss yang boleh menambah lapisan berlata ke gaya yang diimport melalui konfigurasi.

Seterusnya, ambil projek Vite sebagai contoh untuk menerangkan secara ringkas cara menggunakan perpustakaan komponen tambah elemen dalam projek.

Kandungan memulakan projek dan memasang TailwindCSS dan Element Plus ditinggalkan di sini Tidak kira sama ada anda menggunakan import automatik untuk memperkenalkan Element Plus, anda boleh mengikuti langkah dalam artikel ini.

Mula-mula, pasang @web-baseline/postcss-wrap-up-layer, anda boleh memilih pengurus pakej pilihan anda:

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

Kemudian, gunakan pemalam ini dalam fail 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',
            },
          ],
        }),
      ],
    },
  },
})

Itu sahaja, pemalam ini akan menambahkan lapisan tetapan bertingkat pada semua fail yang dipadankan Jika anda menggunakan pustaka komponen lain, anda boleh membuat tetapan yang serupa.

Pengendalian lapisan melata CSS yang lebih mudah dalam Vue SFC (Komponen Fail Tunggal)

Dalam komponen fail tunggal Vue, kita boleh menggunakan untuk menentukan gaya, di mana kita boleh membungkus gaya secara terus dalam lapisan berlatarkan, seperti ini:

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

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

Ini menyusahkan dan tidak cantik. Biasanya, kami tidak memberi perhatian pada lapisan mana gaya itu berada, dan kami tidak mahu melihat lekukan yang sentiasa ada ini. Oleh itu, saya turut membangunkan pemalam vite yang membolehkan anda menggunakan lapisan bertingkat dalam bentuk atribut (seperti:

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

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

Gunakan pemalam ini dalam fail 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(),
  ],
})

Dengan cara ini, komponen di atas boleh ditulis semula seperti berikut:

<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！

Atas ialah kandungan terperinci Menggunakan Lapisan Lata CSS dalam Projek Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!