CSS 범위에서 범위가 지정된 CSS와 CSS 모듈의 차이점에 대한 자세한 답변

이 기사에서는 범위가 지정된 CSS와 CSS 모듈의 차이점에 대한 관련 지식을 제공합니다. 범위가 지정된 CSS와 CSS 모듈은 모두 CSS의 로컬 범위를 제어하고 클래스 이름 중복과 같은 문제를 방지하는 데 사용됩니다. ? 모두에게 도움이 되길 바랍니다.

머리말

scoped CSS와 CSS 모듈은 모두 CSS의 로컬 범위를 제어하고 클래스 이름 중복과 같은 문제를 방지하도록 설계되었습니다. 그렇다면 둘 사이의 차이점은 무엇입니까?

1. CSS 모듈

1.1 설명
모든 클래스 이름에 대해 클래스 이름을 다시 생성하여 CSS 가중치 및 클래스 이름 중복 문제를 효과적으로 방지합니다. CSS 모듈은 클래스 이름을 직접 대체하여 사용자가 클래스 이름을 설정하여 구성 요소 스타일에 영향을 미칠 가능성을 제거하므로 이름 지정을 위해 머리를 숙일 필요가 없습니다.
1.2 구현 원리
스타일 이름에 해시 문자열 접미사를 추가하면 특정 범위 컨텍스트에서 컴파일된 스타일이 전역적으로 고유할 수 있습니다.
1.3 사용법

• webpack.base.conf.js 파일에서 CSS 모듈을 활성화하려면 css-loader에 module: true를 전달합니다. 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>.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 Notes

• 애니메이션 애니메이션의 키프레임을 처리할 때 애니메이션 이름을 먼저 적어야 합니다. 예를 들어 animation: deni .5s이면 정상적으로 컴파일되고, animation: .5s deni이면 비정상적으로 컴파일됩니다. CSS-loader를 구성해야 합니다. 그렇지 않으면 적용되지 않습니다.
• 스타일 로더를 사용하는 경우 이를 적용하려면 이를 vue-style-loader로 구성하고 변경해야 합니다.
• CSS 모듈은 무게 문제를 어떻게 해결하나요?
이름 바꾸기 또는 네임스페이스를 통해 스타일 규칙을 캡슐화하여 선택기에 대한 제약을 줄여 특정 메서드 없이도 클래스 이름을 편안하게 사용할 수 있습니다.
• 스타일 규칙이 각 구성 요소에 결합되면 구성 요소가 더 이상 사용되지 않으면 스타일도 제거됩니다.
  
  
2. 범위 지정

2.1 구현 원칙

Vue는 고유성을 보장하고 스타일을 사유화하고 모듈화하는 목적을 달성하기 위해 DOM 구조와 CSS 스타일에 고유하고 반복되지 않는 태그를 추가합니다. CSS 가중치 및 클래스 이름 중복 문제를 완전히 피하는 것은 불가능합니다.
2.2 사용 방법
< 스타일 > 태그에 scoped
속성 추가 2.3 효과 사용

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

컴파일된 결과:

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

2.4 단점

사용자가 동일하게 정의한 경우 다른 곳에서는 클래스 이름이 여전히 구성 요소의 스타일에 영향을 미칠 수 있습니다.

• CSS 스타일 우선순위의 특성에 따라, Scoped를 처리하면 각 스타일의 가중치가 증가하게 됩니다. 최후의 수단으로 사용해야 할 수도 있습니다! important
• scoped는 태그 선택기 렌더링 속도를 여러 번 저하시킵니다. CSS 모듈 구성은 어렵지 않으니 CSS 모듈을 추천합니다.
  
(학습 영상 공유:
• css 영상 튜토리얼
)

위 내용은 CSS 범위에서 범위가 지정된 CSS와 CSS 모듈의 차이점에 대한 자세한 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!