面试题：CSS构建组件库之模块化问题

1. 样式复用

变量（Variables）：在Sass或Less中，可以定义变量来复用颜色、字体大小等常用样式值。例如，在Sass中：

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
}

.link {
  color: $primary-color;
}

混入（Mixins）：用于复用一组CSS属性。以Less为例：

.mixin-border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.box {
  .mixin-border-radius(10px);
  background-color: lightgray;
}

.card {
  .mixin-border-radius;
  padding: 20px;
}

继承（Inheritance）：Sass支持选择器继承，可复用已有选择器的样式。例如：

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success-message {
  @extend .message;
  background-color: lightgreen;
}

.error-message {
  @extend .message;
  background-color: lightcoral;
}

2. 样式隔离

命名空间（Namespacing）：为每个组件创建独立的命名空间。比如在Sass中：

.component-one {
  h2 {
    font-size: 24px;
  }
  p {
    line-height: 1.5;
  }
}

.component-two {
  h2 {
    font-size: 20px;
  }
  p {
    color: gray;
  }
}

局部作用域（Local Scope）：使用Sass或Less的嵌套规则确保样式仅作用于特定组件。例如：

.component {
  .inner {
    background-color: yellow;
  }
}

这样.inner类的样式只会应用在.component内部，不会影响其他组件。

使用CSS Modules（结合Webpack等工具）：虽然不是CSS预处理器原生功能，但结合Webpack等工具可实现更强大的样式隔离。例如，在React项目中使用CSS Modules with Sass：创建Button.module.scss文件：

.button {
  background-color: blue;
  color: white;
  &:hover {
    background-color: darkblue;
  }
}

在React组件中引入：

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

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

export default Button;

这样.button类只会作用于该Button组件，不会与其他组件的样式冲突。

面试题：CSS构建组件库之模块化问题

知识考点

面试题答案

1. 样式复用

2. 样式隔离