面试题：CSS Foundation框架下组件化开发中如何处理组件间样式的隔离与继承

Question

假设在使用CSS Foundation框架进行组件化开发，现有多个组件，其中一些组件需要继承基础组件的部分样式，同时又要保持自身独特样式不被其他组件干扰。阐述你会采取哪些策略和技术手段（如BEM命名规范、CSS Modules等）来实现组件间样式的合理隔离与继承。

Answer 1

1. BEM命名规范

• 块（Block）：组件整体作为一个块，例如.card表示卡片组件。每个组件有唯一的块名称，这样不同组件之间不会因名称冲突而导致样式混乱。
• 元素（Element）：组件内的各个元素以__连接块名，如.card__title表示卡片标题元素。通过这种方式，明确组件内元素的层级关系，避免样式误应用到其他组件元素上。
• 修饰符（Modifier）：用于改变组件或元素外观的特定状态，以--连接块名，如.card--highlight表示突出显示的卡片。修饰符可基于基础组件样式进行特定调整，同时不影响其他组件。

2. CSS Modules

• 局部作用域：导入CSS Modules样式文件，例如import styles from './card.module.css';。在组件内使用时，通过styles.className的方式引用，确保样式只在当前组件内生效，避免全局污染。例如<div className={styles.card}>。
• 继承与覆写：在CSS Modules文件中，使用@import导入基础组件样式，然后在当前组件样式中针对需要调整的部分进行覆写。例如@import './baseCard.module.css';.card { color: red; }，这里在继承基础卡片样式基础上改变了文本颜色。

3. 自定义属性（CSS Variables）

• 定义通用变量：在基础组件样式中定义一些通用的CSS变量，如--card-bg-color: #fff;。这样其他组件继承基础组件样式时，可复用这些变量保持整体风格一致。
• 组件级变量调整：在特定组件内，可根据自身需求重新定义这些变量，如.special-card { --card-bg-color: #f0f0f0; }，实现对基础样式的个性化定制，同时利用变量的继承机制减少重复代码。

4. Shadow DOM

• 创建独立作用域：通过JavaScript创建Shadow DOM并将组件内容封装其中，如const shadow = element.attachShadow({ mode: 'open' });。在Shadow DOM内部定义的样式不会影响到外部，也不会被外部样式干扰，实现了样式的完全隔离。
• 样式继承（有限）：虽然Shadow DOM与外部样式隔离，但可通过:host选择器在一定程度上继承外部样式规则。例如:host { color: inherit; }可让组件继承外部的文本颜色设置。