样式隔离方案

在现代前端开发中，组件化和样式隔离是提升代码可维护性和可复用性的关键。合理的组件开发规范和样式隔离方案能够有效避免样式污染、命名冲突等问题，同时提高团队协作效率。

组件开发规范

组件命名规则

组件命名应遵循以下原则：

1. 语义化命名：使用有意义的名称，如 UserAvatar 而非 Avatar1
2. 多单词组合：避免单个单词命名，减少冲突概率
3. 目录结构：建议按功能划分目录

// 推荐结构
components/
  ├── User/
  │   ├── UserAvatar.vue
  │   └── UserProfile.vue
  └── Form/
      ├── BaseInput.vue
      └── SubmitButton.vue

组件接口设计

组件应遵循单一职责原则，通过props控制行为：

// 示例：按钮组件
export default {
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'primary', 'danger'].includes(value)
    },
    disabled: Boolean,
    loading: Boolean
  }
}

组件状态管理

1. 避免在多个组件中共享可变状态
2. 使用自定义事件进行父子通信
3. 复杂状态考虑使用Pinia/Vuex等状态管理库

// 子组件触发事件
this.$emit('update:modelValue', newValue)

// 父组件监听
<ChildComponent @update:modelValue="handleUpdate" />

样式隔离方案

CSS Modules

CSS Modules提供自动化的局部作用域CSS：

// Button.module.css
.primary {
  background: #1890ff;
}

// 组件中使用
import styles from './Button.module.css'

<button class={styles.primary}>Submit</button>

Scoped CSS

Vue单文件组件中的scoped属性：

<style scoped>
.button {
  padding: 8px 16px;
}
/* 编译后会自动添加属性选择器 */
</style>

CSS-in-JS

通过JavaScript编写具有局部作用域的CSS：

// 使用styled-components
const Button = styled.button`
  background: ${props => props.primary ? '#1890ff' : '#fff'};
  padding: 8px 16px;
`;

// 使用
<Button primary>Click</Button>

Shadow DOM

浏览器原生支持的样式隔离方案：

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; } /* 仅作用于shadow DOM内部 */
      </style>
      <p>Hello World</p>
    `;
  }
}

BEM命名规范

传统但有效的命名约定：

/* Block Element Modifier */
.user-profile {} /* Block */
.user-profile__avatar {} /* Element */
.user-profile--disabled {} /* Modifier */

工程化实践

PostCSS处理

通过插件实现自动前缀、嵌套等特性：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

样式变量管理

集中管理设计变量：

// variables.scss
$primary-color: #1890ff;
$spacing-unit: 8px;

// 使用
.button {
  padding: $spacing-unit * 2;
  background: $primary-color;
}

原子化CSS

实用优先的样式方案：

<!-- 使用Tailwind CSS -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Click
</button>

性能优化

按需加载样式

配合组件实现样式按需加载：

// webpack配置
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          auto: true,
          localIdentName: '[local]--[hash:base64:5]'
        }
      }
    }
  ]
}

关键CSS提取

提取首屏关键CSS：

// 使用critters插件
const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      preload: 'swap',
      pruneSource: true
    })
  ]
}

跨框架方案

Web Components

浏览器原生组件方案：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host {
          display: block;
        }
      </style>
      <div class="content">...</div>
    `;
    this.attachShadow({ mode: 'open' }).appendChild(
      template.content.cloneNode(true)
    );
  }
}

StencilJS

编译生成Web Components的工具：

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() first: string;
  
  render() {
    return <div>Hello, {this.first}</div>;
  }
}

测试策略

视觉回归测试

确保样式变更可控：

// 使用Storybook + Chromatic
export const PrimaryButton = () => ({
  components: { MyButton },
  template: '<my-button variant="primary">Click</my-button>'
});

样式单元测试

验证关键样式规则：

// 使用jest-styled-components
test('Button has correct styles', () => {
  const tree = renderer.create(<Button primary />).toJSON()
  expect(tree).toHaveStyleRule('background-color', '#1890ff')
})

团队协作规范

样式lint规则

统一代码风格：

// .stylelintrc
{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
    "color-no-invalid-hex": true
  }
}

设计Token管理

与设计系统对接：

// tokens.js
export const colors = {
  primary: {
    100: '#e6f7ff',
    500: '#1890ff',
    900: '#003a8c'
  }
}