<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<!-- 父組件 Parent.vue -->
<template>
  <div class="container">
    <h1 class="title">父組件標(biāo)題</h1>
    <ChildComponent />
  </div>
</template>

<style scoped>
.title {
  color: blue;
  font-size: 24px;
}
</style>

<!-- 子組件 Child.vue -->
<template>
  <div class="container">
    <h2 class="title">子組件標(biāo)題</h2>
    <p>內(nèi)容...</p>
  </div>
</template>

<style scoped>
.title {
  color: red;
  font-size: 16px;
}
</style>

<!-- 父組件 -->
<style scoped>
.parent ::v-deep .child-item {
  color: red; /* 這個(gè)樣式會(huì)滲透到子組件中的.child-item元素 */
}
</style>

<template>
  <div class="custom-wrapper">
    <el-button class="submit-btn">提交</el-button>
  </div>
</template>

<style scoped>
.custom-wrapper .submit-btn {
  background: red; /* 可能無法覆蓋Element UI的原始樣式 */
}
</style>

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">標(biāo)題</h1>
    <p :class="{ [$style.highlight]: isHighlight }">內(nèi)容</p>
  </div>
</template>

<style module>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #333;
}

.highlight {
  background-color: yellow;
}
</style>

<template>
  <div class="container_1abc8d">...</div>
</template>

<style>
.container_1abc8d {
  padding: 20px;
}
</style>

<template>
  <div class="user-card">
    <div class="user-card__header">
      <h2 class="user-card__title user-card__title--large">用戶信息</h2>
    </div>
    <div class="user-card__body">
      <p class="user-card__content user-card__content--highlighted">內(nèi)容...</p>
    </div>
  </div>
</template>

<style scoped>
.user-card { /* Block */ }
.user-card__header { /* Element */ }
.user-card__title { /* Element */ }
.user-card__title--large { /* Modifier */ }
.user-card__content--highlighted { /* Modifier */ }
</style>

<!-- Vue 2 語法 -->
<style scoped>
/* 使用 /deep/ 或 >>> */
.parent /deep/ .child-component {
  color: red;
}

.parent >>> .child-component {
  color: red;
}

/* 使用 ::v-deep */
.parent ::v-deep .child-component {
  color: red;
}
</style>

<!-- Vue 3 語法 -->
<style scoped>
.parent :deep(.child-component) {
  color: red;
}
</style>

<template>
  <div :class="[$style.local, 'global-class']">
    <child-component :class="$style.child" />
  </div>
</template>

<style module>
.local {
  padding: 20px;
}

.child {
  margin-top: 10px;
}
</style>

<style scoped>
/* 全局樣式或需要滲透到子組件的樣式 */
.global-class {
  font-family: Arial;
}
</style>

<template>
  <div class="user-profile">
    <div class="user-profile__avatar">
      <img :src="avatarUrl" class="user-profile__image user-profile__image--rounded">
    </div>
  </div>
</template>

<style scoped>
.user-profile { /* Block */ }
.user-profile__avatar { /* Element */ }
.user-profile__image { /* Element */ }
.user-profile__image--rounded { /* Modifier */ }
</style>

src/
├── styles/
│   ├── base/
│   │   ├── _variables.scss    # 全局變量
│   │   ├── _reset.scss        # 重置樣式
│   │   └── _mixins.scss       # 混合宏
│   ├── components/
│   │   ├── _button.scss       # 按鈕組件樣式
│   │   └── _modal.scss        # 彈窗組件樣式
│   ├── layouts/
│   │   ├── _header.scss       # 布局樣式
│   │   └── _footer.scss
│   └── main.scss              # 主樣式文件
├── components/
│   ├── Common/
│   │   ├── Button.vue
│   │   └── Modal.vue
│   └── Business/
│       ├── UserCard.vue
│       └── ProductList.vue

// .stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue'
  ],
  rules: {
    'selector-class-pattern': '^[a-z][a-zA-Z0-9]*$', // 類名命名規(guī)范
    'selector-max-specificity': '0,2,0', // 限制選擇器特異性
    'selector-max-compound-selectors': 3, // 限制選擇器復(fù)雜度
    'no-descending-specificity': null,
    'no-duplicate-selectors': true // 禁止重復(fù)選擇器
  }
};

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run stylelint
        run: npx stylelint "**/*.{vue,css,scss}"

// backstop.config.js
module.exports = {
  id: "vue_components",
  viewports: [
    {
      name: "desktop",
      width: 1024,
      height: 768
    }
  ],
  scenarios: [
    {
      label: "Button Primary",
      url: "http://localhost:6006/iframe.html?id=button--primary",
      selectors: [".button"]
    }
  ],
  paths: {
    bitmaps_reference: "tests/visual/backstop_data/bitmaps_reference",
    bitmaps_test: "tests/visual/backstop_data/bitmaps_test",
    engine_scripts: "tests/visual/backstop_data/engine_scripts",
    html_report: "tests/visual/backstop_data/html_report",
    ci_report: "tests/visual/backstop_data/ci_report"
  },
  report: ["browser"],
  engine: "puppeteer"
};

import { mount } from '@vue/test-utils'
import Button from '@/components/Button.vue'

describe('Button.vue', () => {
  it('renders with correct classes', () => {
    const wrapper = mount(Button, {
      propsData: {
        variant: 'primary'
      }
    })
    
    expect(wrapper.classes()).toContain('button')
    expect(wrapper.classes()).toContain('button--primary')
  })
})

/* 添加邊框幫助識別元素邊界 */
.debug * {
  outline: 1px solid red;
}

/* 高亮特定組件 */
.component-name {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5);
}

<!-- 好的例子：語義化且具體 -->
<template>
  <div class="payment-success-modal">
    <header class="payment-success-modal__header">
      <h2 class="payment-success-modal__title">支付成功</h2>
    </header>
  </div>
</template>

<!-- 不好的例子：過于通用 -->
<template>
  <div class="modal">
    <header class="header">
      <h2 class="title">支付成功</h2>
    </header>
  </div>
</template>

/* 推薦順序 */
.selector {
  /* 布局相關(guān) */
  position: absolute;
  top: 0;
  left: 0;
  
  /* 盒模型 */
  display: block;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  
  /* 文本樣式 */
  font-family: Arial;
  font-size: 14px;
  color: #333;
  
  /* 視覺樣式 */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  
  /* 其他 */
  transition: all 0.3s;
}