介绍
Web Components 是一种新兴的技术，它可以让开发者将界面组件化，提高开发效率和代码复用性。在 Web Components 中，CSS Modules 和 CSS 变量是两个非常重要的特性。
CSS Modules 是一种 CSS 模块化技术，可以让 CSS 中的 class 名称进行局部作用域，避免不同 class 名称之间的冲突。CSS 变量则可以让开发者在样式中使用变量进行定义和修改，从而方便维护。
本文将详细介绍 CSS Modules 和 CSS 变量的原理、用法和优缺点，同时提供示例代码和指导意义，希望能帮助您更好地理解 Web Components 技术。
CSS Modules
原理
在传统的 CSS 中，全局的 class 名称可能会出现重复，导致样式被覆盖或冲突。而使用 CSS Modules，则可以将 CSS 中的 class 名称进行局部作用域，避免不同 class 名称之间的冲突。在使用 CSS Modules 时，每个 class 名称会被编译为一个唯一的哈希值，从而实现局部作用域。
用法
使用 CSS Modules 需要在 HTML 中引用编译后的 CSS 文件，同时，在 JavaScript 中引用 CSS 文件时，需要使用 CSS Modules 的方式进行引用：
import styles from './styles.css'; // 使用样式 element.classList.add(styles.example);
在样式文件中，可以使用类似于 JavaScript 的语法进行定义和引用：
.example {
color: red;
}
.highlight {
color: blue;
}优缺点
使用 CSS Modules 可以有效避免 class 名称冲突的问题，提高样式的可维护性和可重用性。同时，由于每个 class 名称都会被编译为一个唯一的哈希值，因此可以避免 class 名称被恶意使用的风险。
然而，使用 CSS Modules 也存在一些缺点，比如在编写样式时需要使用类似于 JavaScript 的语法，增加了学习成本。另外，由于每个 class 名称都会被编译为一个唯一的哈希值，因此在调试样式时需要查看编译后的样式，不能直接查看源代码中的 class 名称。
CSS 变量
原理
CSS 变量可以让开发者在样式中使用变量进行定义和修改，从而方便维护。CSS 变量使用 -- 符号进行定义，并使用 var() 函数进行引用。
:root {
--primary-color: #007bff;
}
a {
color: var(--primary-color);
}用法
在 Web Components 中，可以通过设置元素的属性来传递 CSS 变量。在 CSS 中使用 var() 函数进行引用：
// www.javascriptcn.com code example
class MyComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
--primary-color: ${this.getAttribute('primary-color') || '#007bff'};
}
button {
background-color: var(--primary-color);
}
</style>
<button>Click me</button>
`;
}
}在 HTML 中，可以通过设置元素的属性来传递 CSS 变量：
<my-component primary-color="#28a745"></my-component>
优缺点
使用 CSS 变量可以让样式中的颜色、大小等属性变得更加灵活和可维护。同时，由于 CSS 变量可以在 JavaScript 中进行修改，因此可以实现动态的主题切换等功能。
然而，由于 CSS 变量的兼容性不够完善，因此在某些浏览器中可能无法正常使用。另外，由于在 Web Components 中需要使用 JavaScript 进行传递变量，因此也增加了一定的开发难度。
示例代码
CSS Modules
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modules</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="example">
This is an example of CSS Modules.
</div>
<div class="highlight">
This is an example of CSS Modules.
</div>
<script src="index.js"></script>
</body>
</html>.example {
color: red;
}
.highlight {
color: blue;
}import styles from './styles.css';
const element1 = document.querySelector('.example');
element1.classList.add(styles.example);
const element2 = document.querySelector('.highlight');
element2.classList.add(styles.highlight);CSS 变量
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 变量</title>
</head>
<body>
<my-component primary-color="#28a745"></my-component>
<script src="index.js"></script>
</body>
</html>// www.javascriptcn.com code example
class MyComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
--primary-color: ${this.getAttribute('primary-color') || '#007bff'};
}
button {
background-color: var(--primary-color);
}
</style>
<button>Click me</button>
`;
}
}
customElements.define('my-component', MyComponent);指导意义
Web Components 技术是一种新兴的技术，它可以将界面组件化，提高开发效率和代码复用性。在 Web Components 中，CSS Modules 和 CSS 变量是两个非常重要的特性，可以帮助开发者解决样式冲突和样式维护等问题。
在使用 CSS Modules 和 CSS 变量时，需要注意它们的优缺点，及其与传统 CSS 的区别。需要根据实际情况进行选择，并结合 JavaScript 进行开发，以实现更加灵活和可维护的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6901fa941bf7134c5ae8f