面试题：跨框架CSS组件化方案设计

Question

假设要设计一套可以在React和Vue项目中复用的CSS组件化方案，你将如何着手？请详细描述从架构设计、技术选型到具体实现的思路，需要考虑到不同框架的特点以及兼容性等问题。

Answer 1

架构设计

1. 组件结构规划
   • 对通用样式进行分类，例如按钮、表单、导航栏等组件。为每个组件创建独立的目录，目录内包含该组件相关的样式文件、文档说明等。
   • 设计组件的层级结构，确保嵌套组件样式的正确继承和覆盖，避免样式冲突。
2. 抽象与复用
   • 提取公共样式变量，如颜色、字体大小、间距等，形成全局样式变量文件。这样在不同组件中可以统一使用这些变量，方便主题切换和样式修改。
   • 对于一些通用的样式模块，如 flex 布局、响应式布局等，创建可复用的 mixin 或函数，方便在不同组件中调用。

技术选型

1. CSS 预处理器：选择 Sass 或 Less。它们都支持变量、mixin、函数等功能，能有效提高样式编写的效率和可维护性。以 Sass 为例，它的语法更灵活，支持嵌套写法，与组件化的结构更契合。
2. CSS 模块化方案
   • CSS Modules：在 React 项目中，CSS Modules 可以自动为每个类名生成唯一的哈希值，避免全局样式冲突。在 Vue 项目中也可以通过配置使用，将样式作用域限定在组件内部。
   • Shadow DOM：虽然兼容性稍差，但它提供了真正的样式封装，组件样式不会影响外部，也不会被外部影响。对于一些需要高度隔离的组件，可以考虑使用 Shadow DOM 结合 polyfill 来处理兼容性问题。
3. PostCSS：用于处理 CSS 的后处理工作，如自动添加浏览器前缀、压缩 CSS 等。它可以在构建过程中对 CSS 进行进一步优化，提高项目的兼容性和性能。

具体实现思路

1. React 项目实现
   • 安装依赖：安装 Sass（或 Less）、CSS Modules、PostCSS 相关依赖。例如，使用 npm install sass sass - loader css - loader postcss - loader autoprefixer。
   • 配置 Webpack：在 Webpack 配置文件中，配置 Sass 或 Less 加载器处理样式文件，同时启用 CSS Modules。如下是部分 Webpack 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'css - loader?modules&localIdentName=[name]__[local]___[hash:base64:5]',
                    'postcss - loader',
                   'sass - loader'
                ]
            }
        ]
    }
};

- **组件样式编写**：在 React 组件中，引入对应的 CSS Modules 文件。例如：

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

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

export default Button;

2. Vue 项目实现
   • 安装依赖：同样安装 Sass（或 Less）、PostCSS 相关依赖，Vue 项目默认支持 CSS Modules，可以通过 vue - loader 配置。例如，npm install sass sass - loader postcss - loader autoprefixer。
   • 配置 Vue - Loader：在 vue.config.js 文件中，配置 Sass 或 Less 以及 PostCSS。示例如下：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/variables.scss";`
            },
            postcss: {
                plugins: [
                    require('autoprefixer')
                ]
            }
        }
    }
};

- **组件样式编写**：在 Vue 单文件组件中，使用 `<style scoped module>` 标签来编写组件作用域内的样式。例如：

<template>
    <button class="button">Click me</button>
</template>

<style scoped module>
.button {
    background - color: var(--primary - color);
    color: white;
}
</style>

3. 兼容性处理
   • 使用 Polyfill：对于一些现代 CSS 特性（如 CSS Grid、Flexbox 的某些属性），可以使用 Autoprefixer 自动添加浏览器前缀，以提高兼容性。同时，对于 Shadow DOM 等兼容性较差的技术，可以使用相应的 polyfill 库。
   • 优雅降级：在设计样式时，要考虑到不支持某些特性的浏览器，采用优雅降级的策略，确保在低版本浏览器中页面仍然可用且基本样式保持一致。例如，对于一些动画效果，可以在不支持 CSS 动画的浏览器中显示静态样式。