Style isolation solution

In modern front-end development, componentization and style isolation are key to improving code maintainability and reusability. Reasonable component development standards and style isolation solutions can effectively avoid issues such as style pollution and naming conflicts while enhancing team collaboration efficiency.

Component Development Standards

Component Naming Rules

Component naming should follow these principles:

1. Semantic Naming: Use meaningful names, such as UserAvatar instead of Avatar1.
2. Multi-Word Combination: Avoid single-word names to reduce the probability of conflicts.
3. Directory Structure: Organize by functionality.

// Recommended structure
components/
  ├── User/
  │   ├── UserAvatar.vue
  │   └── UserProfile.vue
  └── Form/
      ├── BaseInput.vue
      └── SubmitButton.vue

Component Interface Design

Components should follow the single responsibility principle, with behavior controlled via props:

// Example: Button component
export default {
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'primary', 'danger'].includes(value)
    },
    disabled: Boolean,
    loading: Boolean
  }
}

Component State Management

1. Avoid sharing mutable state across multiple components.
2. Use custom events for parent-child communication.
3. For complex state, consider using state management libraries like Pinia or Vuex.

// Child component emits an event
this.$emit('update:modelValue', newValue)

// Parent component listens
<ChildComponent @update:modelValue="handleUpdate" />

Style Isolation Solutions

CSS Modules

CSS Modules provide automated local scoping for CSS:

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

// Usage in component
import styles from './Button.module.css'

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

Scoped CSS

Scoped attribute in Vue single-file components:

<style scoped>
.button {
  padding: 8px 16px;
}
/* Post-compilation, attribute selectors are automatically added */
</style>

CSS-in-JS

Write locally scoped CSS via JavaScript:

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

// Usage
<Button primary>Click</Button>

Shadow DOM

Browser-native style isolation solution:

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; } /* Only applies inside shadow DOM */
      </style>
      <p>Hello World</p>
    `;
  }
}

BEM Naming Convention

Traditional but effective naming convention:

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

Engineering Practices

PostCSS Processing

Enable features like autoprefixing and nesting via plugins:

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

Style Variable Management

Centralized management of design variables:

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

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

Atomic CSS

Utility-first styling approach:

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

Performance Optimization

On-Demand Style Loading

Load styles on-demand with components:

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

Critical CSS Extraction

Extract above-the-fold critical CSS:

// Using critters plugin
const Critters = require('critters-webpack-plugin');

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

Cross-Framework Solutions

Web Components

Browser-native component solution:

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

Tool for compiling 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>;
  }
}

Testing Strategies

Visual Regression Testing

Ensure controlled style changes:

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

Style Unit Testing

Validate critical style rules:

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

Team Collaboration Standards

Style Linting Rules

Unify code style:

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

Design Token Management

Integrate with design systems:

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