Dieser Artikel vermittelt Ihnen relevante Kenntnisse über den Unterschied zwischen bereichsbezogenem CSS und CSS-Modul, um den lokalen Bereich von CSS zu steuern und Probleme wie die Duplizierung von Klassennamen zu verhindern ? Ich hoffe, es hilft allen.
scoped CSS und CSS-Module dienen dazu, den lokalen Geltungsbereich von CSS zu steuern und Probleme wie die Duplizierung von Klassennamen zu verhindern. Was ist also der Unterschied zwischen den beiden?
1.1. Erklärung
Erzeugt Klassennamen für alle Klassennamen neu und vermeidet so effektiv die Probleme der CSS-Gewicht und Duplizierung von Klassennamen. Das CSS-Modul ersetzt direkt den Klassennamen, wodurch die Möglichkeit ausgeschlossen wird, dass der Benutzer den Klassennamen so festlegt, dass er den Komponentenstil beeinflusst, sodass Sie sich nicht den Kopf über die Benennung zerbrechen müssen.
1.2 Implementierungsprinzip
Durch Hinzufügen eines Hash-String-Suffixes zum Stilnamen kann der kompilierte Stil in einem bestimmten Bereichskontext global eindeutig sein.
1.3 Verwendung
//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>Ermöglicht die Kapselung von Stilregeln durch Umbenennung oder Namespace, wodurch Einschränkungen für Selektoren reduziert werden, sodass Klassennamen bequem verwendet werden können, ohne dass bestimmte Methoden erforderlich sind. Wenn Stilregeln an jede Komponente gekoppelt sind, werden die Stile auch entfernt, wenn die Komponente nicht mehr verwendet wird.
2. Scoped
2.1 Implementierungsprinzip
Vue fügt der DOM-Struktur und dem CSS-Stil eindeutige und sich nicht wiederholende Tags hinzu, um Einzigartigkeit sicherzustellen und den Zweck der Privatisierung und Modularisierung des Stils zu erreichen. Es ist unmöglich, das Problem der CSS-Gewichts- und Klassennamenduplizierung vollständig zu vermeiden.<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><script>export default {
created () {
console.log(this.$style.red)
// -> "red_1VyoJ-uZ"
// 一个基于文件名和类名生成的标识符
}}</script>Wenn der Benutzer dasselbe definiert an anderer Stelle Der Klassenname kann sich immer noch auf den Stil der Komponente auswirken.
Entsprechend den Merkmalen der CSS-Stilpriorität erhöht die Verarbeitung von Scoped das Gewicht jedes Stils, der auf Komponenten verweist, die Scoped verwenden. Als Unterkomponente wird es schwierig, den Stil der Unterkomponente zu ändern Möglicherweise müssen Sie es als letzten Ausweg verwenden! wichtig
scoped verlangsamt das Rendern von Tag-Selektoren um ein Vielfaches. Wenn Sie Tag-Selektoren verwenden, verringert sich die Leistung erheblich, bei der Verwendung von Klasse oder ID jedoch nicht. 3. Zusammenfassung: Das CSS-Modul ist tatsächlich effektiver als das Scoped-Modul. Gut, und Die Konfiguration des CSS-Moduls ist nicht schwierig, daher empfehle ich das CSS-Modul.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonAusführliche Antwort auf den Unterschied zwischen CSS mit Gültigkeitsbereich und CSS-Modul im CSS-Bereich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
