Jawapan terperinci kepada perbezaan antara css berskop dan modul css dalam skop css

Artikel ini membawa anda pengetahuan yang berkaitan tentang perbezaan antara modul css dan css skop digunakan untuk mengawal skop tempatan css dan menghalang pertindihan nama kelas. Nah, saya harap ia membantu semua orang.

Prakata

modul css dan css berskop kedua-duanya direka bentuk untuk mengawal skop tempatan css dan mengelakkan masalah seperti pertindihan nama kelas. Jadi apa beza antara keduanya?

1. modul css

1.1. Penjelasan
menjana semula nama kelas untuk semua nama kelas, dengan berkesan mengelakkan masalah berat css dan pertindihan nama kelas. modul css secara langsung menggantikan nama kelas, menghapuskan kemungkinan pengguna menetapkan nama kelas untuk mempengaruhi gaya komponen, jadi tidak perlu memerah otak anda untuk menamakan.
1.2 Prinsip Pelaksanaan
Dengan menambahkan akhiran rentetan cincang pada nama gaya, gaya yang disusun dalam konteks skop tertentu boleh menjadi unik secara global.
1.3 Penggunaan

• Dalam fail webpack.base.conf.js, hantar modul: true kepada css-loader untuk mendayakan Modul CSS. localIdentName ialah peraturan penamaan untuk menetapkan gaya yang dijana.

//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• Tambahkan atribut modul dalam teg gaya > templat Untuk menggunakannya

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>

• Gunakan dalam js

<template>
  <p :class="$style.red">
    This should be red  </p></template><template>
  <p>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold    </p>
  </p></template>

• 1.4 Kesan penggunaan

<script>export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一个基于文件名和类名生成的标识符
  }}</script>

Hasil selepas penyusunan:

<template>
 <p :class="$style.gray">
 Im gray </p></template><style module>.gray {
 color: gray;}</style>

1.5 Nota

//编译结果<p class="gray_3FI3s6uz">Im gray</p>.gray_3FI3s6uz {
 color: gray;}

Apabila memproses bingkai utama animasi animasi, nama animasi mesti ditulis terlebih dahulu. Contohnya, jika animasi: deni .5s, ia akan menyusun secara normal; jika animasi: .5s deni, ia akan menyusun secara tidak normal Ingat untuk mengkonfigurasi css-loader, jika tidak, ia tidak akan berkuat kuasa.

Jika anda menggunakan pemuat gaya, anda perlu mengkonfigurasi dan menukarnya kepada pemuat gaya vue untuk berkuat kuasa.
• Bagaimanakah modul css menyelesaikan masalah berat badan?
• Membenarkan peraturan gaya dirangkumkan melalui penamaan semula atau ruang nama, mengurangkan kekangan pada pemilih, supaya nama kelas boleh digunakan dengan selesa tanpa kaedah tertentu.
Apabila peraturan gaya digandingkan pada setiap komponen, gaya juga dialih keluar apabila komponen tidak lagi digunakan.
• 2. Skop
  
  
2.1 Prinsip Pelaksanaan

Vue memastikan keunikan dengan menambahkan teg unik dan tidak berulang pada struktur DOM dan gaya css tujuan penswastaan ​​gaya dan modularisasi. Adalah mustahil untuk mengelakkan sepenuhnya masalah berat css dan pertindihan nama kelas.

2.2 Cara menggunakan Tambahkan atribut
skop
pada gaya < Hasil terkumpul:

2.4 Kelemahan

<style scoped>h1 {
 color: #f00;}</style>Jika pengguna mentakrifkan nama kelas yang sama di tempat lain, ia mungkin masih menjejaskan komponen. </p>
<p></p>Menurut ciri keutamaan gaya CSS, pemprosesan berskop akan meningkatkan berat setiap gaya Apabila merujuk komponen berskop <pre class="brush:php;toolbar:false">h1[data-v-4c3b6c1c] {
 color: #f00;}

sebagai subkomponen, ia menjadi sukar untuk mengubah suai gaya subkomponen tiada pilihan selain menggunakannya! penting

skop akan memperlahankan pemaparan pemilih teg berkali-kali Apabila menggunakan pemilih teg, skop akan mengurangkan prestasi secara serius, tetapi menggunakan kelas atau id tidak akan

3. Ringkasan
• .
Kesan sebenar modul css adalah lebih baik daripada skop, dan konfigurasi modul css tidak sukar, jadi saya lebih mengesyorkan modul css.
• 
  (Mempelajari perkongsian video:
tutorial video css
• )

Atas ialah kandungan terperinci Jawapan terperinci kepada perbezaan antara css berskop dan modul css dalam skop css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!