面试题：CSS 组件库开发中的样式隔离问题

避免不同组件之间样式相互干扰的策略和技术手段

命名约定：采用 BEM（块、元素、修饰符）等命名规范，让类名具有明确的语义和层级关系，降低命名冲突可能性。例如：.block__element--modifier。
作用域限定：使用 CSS 预处理器（如 Sass、Less）的嵌套规则，将样式限定在特定的选择器层级内。例如：

.component {
  color: red;
  .sub - component {
    font - size: 14px;
  }
}

CSS Modules：将 CSS 样式封装到各个模块中，通过生成唯一的类名来实现样式隔离。
Shadow DOM：创建一个独立的 DOM 树和样式作用域，使组件的样式不会影响到外部，反之亦然。

使用 CSS Modules 实现样式隔离

安装配置：在项目中安装支持 CSS Modules 的工具，如在 webpack 项目中配置 css - loader 开启 modules 选项。
使用示例：
- 创建 Button.module.css 文件：

.button {
  background - color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
}

在 JavaScript 组件中引入：

import React from'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click Me</button>;
};

export default Button;

优点：
- 简单易用，与现有的构建工具集成方便。
- 样式封装性好，不同组件同名类名不会冲突。
- 支持局部作用域和热重载，开发体验好。
缺点：
- 类名生成的哈希值可能导致样式难以调试，尤其是在浏览器开发者工具中。
- 全局样式管理相对复杂，可能需要额外配置来处理全局样式。

使用 Shadow DOM 实现样式隔离

创建 Shadow DOM：以 JavaScript 为例，在 HTML 中创建一个自定义元素，并附加 Shadow DOM：

<my - component></my - component>
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const style = document.createElement('style');
      style.textContent = `
        button {
          background - color: green;
          color: white;
          padding: 10px 20px;
          border: none;
        }
      `;
      const button = document.createElement('button');
      button.textContent = 'Click Me';
      shadow.appendChild(style);
      shadow.appendChild(button);
    }
  }
  customElements.define('my - component', MyComponent);
</script>

优点：
- 真正的样式隔离，完全防止样式泄漏和外部样式干扰。
- 原生支持，不需要额外的构建工具。
- 适合构建高度封装、可复用的 Web 组件。
缺点：
- 兼容性问题，一些旧版本浏览器不支持。
- 开发和调试相对复杂，需要熟悉 Shadow DOM 的相关 API 和概念。
- 与外部 DOM 交互受限，如样式穿透较困难，可能需要使用 ::part 和 ::theme 等特定选择器来处理。

面试题：CSS 组件库开发中的样式隔离问题

知识考点

面试题答案

避免不同组件之间样式相互干扰的策略和技术手段

使用 CSS Modules 实现样式隔离

使用 Shadow DOM 实现样式隔离