面试题：Svelte中CSS Modules与Scoped CSS的对比及应用场景

CSS Modules特点

作用域隔离：通过将CSS类名进行哈希处理，生成唯一的类名，实现样式的作用域隔离，避免全局样式污染。
显式导入：需要在组件中显式导入CSS模块，明确组件与样式的依赖关系。
支持JavaScript集成：可以在JavaScript中访问CSS模块中的类名，方便动态操作样式。

Scoped CSS特点

自动作用域：Svelte会自动为组件内的CSS样式添加作用域，无需手动处理类名。
简洁语法：编写方式与传统CSS相似，学习成本低。
深度选择器限制：对深度选择器（如>>>, /deep/等）存在一些限制，以维护样式的作用域。

适用场景

CSS Modules适用场景：
- 复杂组件逻辑与样式交互：当组件内有复杂的JavaScript逻辑需要动态操作样式时，CSS Modules能更好地与JavaScript集成。例如，在一个可折叠面板组件中，JavaScript控制折叠状态，同时需要根据状态切换不同的样式类名，使用CSS Modules可以方便地在JavaScript中引用样式类名。
- 样式复用性高：如果组件的部分样式可能在其他组件中复用，CSS Modules可以通过导出类名的方式，方便地在不同组件中导入使用。比如，一个通用的按钮样式模块，可以在多个不同功能的按钮组件中复用。
Scoped CSS适用场景：
- 简单组件快速开发：对于简单的、样式逻辑不复杂的组件，Scoped CSS的简洁语法能快速实现样式隔离，提高开发效率。例如，一个简单的提示框组件，只需简单的几行样式，使用Scoped CSS能快速完成样式编写。
- 传统CSS开发者：对于熟悉传统CSS开发方式的开发者，Scoped CSS的编写方式更容易上手，无需学习新的样式导入和类名处理方式。

示例：选择CSS Modules而不是Scoped CSS

假设我们有一个电商商品列表组件，每个商品项有不同的状态（如热销、新品等），并且需要通过JavaScript动态切换商品项的样式，以突出不同状态。

<script>
    import styles from './ProductItem.module.css';
    let product = { status: 'new' };
    function handleClick() {
        product.status = product.status === 'new'? 'hot' : 'new';
    }
</script>

<button class={styles[product.status]} on:click={handleClick}>
    {product.status === 'new'? '新品' : '热销'}
</button>

/* ProductItem.module.css */
.new {
    background-color: lightblue;
}
.hot {
    background-color: lightcoral;
}

在这种情况下，CSS Modules方便在JavaScript中根据商品状态动态切换样式类名。

示例：选择Scoped CSS而不是CSS Modules

对于一个简单的导航栏组件，只需设置基本的颜色、字体等样式，不需要复杂的JavaScript与样式交互。

<script>
    // 无复杂逻辑
</script>

<style>
    nav {
        background-color: #333;
        color: white;
        padding: 10px;
    }
</style>

<nav>
    <a href="#">首页</a>
    <a href="#">产品</a>
</nav>

这里使用Scoped CSS能快速实现样式编写，无需额外的样式导入等操作。