首頁 >web前端 >前端問答 >詳細解答css作用域之scoped css和css module的區別

詳細解答css作用域之scoped css和css module的區別

WBOY
WBOY轉載
2022-02-14 18:41:402239瀏覽

這篇文章為大家帶來了scoped css和css module的區別的相關知識,scoped css和css module都是為了控制css的局部作用域,防止類名重複等問題,那麼兩者有什麼區別呢,希望對大家有幫助。

詳細解答css作用域之scoped css和css module的區別

前言

scoped css和css module都是為了控制css的局部作用域,防止類別名稱重複等問題。那麼兩者有什麼差別呢?

一、css module

1.1.解釋
為所有類別名稱重新產生類別名,有效避開了css權重和類別名稱重複的問題。 css module直接取代了類別名,排除了使用者設定類別名稱影響元件樣式的可能性,這樣就不必為了命名而絞盡腦汁。
1.2實作原理
透過給樣式名稱加上hash字串後綴的方式,實現特定作用域情境中的樣式編譯後的樣式在全域唯一。
1.3使用方法

  • 在webpack.base.conf.js檔案中,向 css-loader 傳入 modules: true 來開啟CSS Module。 localIdentName 是設定生成樣式的命名規則。
//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
  • 在< style >標籤新增module 屬性
<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>
  • 在vue範本中透過動態類別綁定來使用它
<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>
  • 在js中使用
<script>export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一个基于文件名和类名生成的标识符
  }}</script>

#1.4使用效果

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

編譯後結果:

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

1.5注意點

  • 在處理動畫animation的關鍵影格keyframes,動畫名稱必須先寫。例如,animation: deni .5s,能正常編譯; animation: .5s deni, 則編譯異常
  • 記得配置css-loader,否則不會生效。
  • 若使用的是style-loader,則需設定更換為vue-style-loader才可生效。
  • css modules如何解決權重問題?
    允許透過重新命名或命名空間來封裝樣式規則,減少對選擇器的約束,從而達到不需要特定方法就可舒服的使用類別名稱。
    當樣式規則耦合到每個元件時,當不再使用元件時,樣式也會被移除。

二、Scoped

2.1實作原理
vue透過在DOM結構以及css樣式上加唯一不重複的標記,以保證唯一,達到樣式私有化模組化的目的。無法完全避開css權重和類別名稱重複的問題。
2.2使用方法
在< style >標籤新增scoped屬性
2.3使用效果

<style scoped>h1 {
 color: #f00;}</style>

編譯後結果:

h1[data-v-4c3b6c1c] {
 color: #f00;}

2.4缺點

  • #如果使用者在別處定義了相同的類別名,也許還是會影響到元件的樣式。
  • 根據css樣式優先權的特性,scoped這種處理會造成每個樣式的權重加重,引用使用了scoped的組件
    作為子組件,修改子組件的樣式變得很難,可能迫不得已只能用! important
  • scoped會使標籤選擇器渲染變慢很多倍,用標籤選擇器時scoped會嚴重降低效能,而使用class或id則不會

三、總結

css module實際效果比scoped好,而且css module配置並不難,所以我比較推薦css module。

(學習影片分享:css影片教學

以上是詳細解答css作用域之scoped css和css module的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除