摘要：@layer reset, base, components, utilities;@layer components { .button { background: blue; }}
随着项目复杂度的增加，CSS样式隔离变得越来越重要，分享12个能够显著降低样式冲突的技巧。
采用块（Block）、元素（Element）、修饰符（Modifier）的命名方法。
/* 传统方式 */.sidebar .title { }/* BEM命名 */.sidebar__title--highlight { color: #007bff; font-weight: bold;}通过自动生成唯一的类名来实现样式隔离。
/* styles.module.css */.container { max-width: 1200px; margin: 0 auto;}import styles from './styles.module.css';function Component { return ;}利用Web Components的Shadow DOM实现完全的样式隔离。
class MyComponent extends HTMLElement { constructor { super; const shadow = this.attachShadow({ mode: 'closed' }); const style = document.createElement('style'); style.textContent = ` :host { display: block; background: #f4f4f4; } `; shadow.appendChild(style); }}为不同模块或组件添加特定的命名空间前缀。
/* 页面级命名空间 */.homepage-header { }.homepage-sidebar { }/* 组件级命名空间 */.user-profile__avatar { }.user-profile__name { }使用最新的@scope规则精确控制样式作用范围。
@scope (.card) { h2 { color: #333; } p { font-size: 14px; }}通过自定义属性实现可控的样式继承和隔离。
.theme-light { --primary-color: blue; --secondary-color: green;}.theme-dark { --primary-color: darkblue; --secondary-color: darkgreen;}.button { background-color: var(--primary-color);}利用新一代选择器降低选择器特异性。
/* 降低选择器特异性 */:where(.sidebar .title) { font-weight: bold;}:is(.header, .footer) .nav { display: flex;}使用contain属性限制CSS布局和绘制的作用范围。
.component { contain: layout; /* 隔离布局 */ contain: paint; /* 隔离绘制 */ contain: strict; /* 完全隔离 */}在组件库和框架中精确控制样式穿透。
/* Vue Scoped Style */.parent ::v-deep .child { color: red;}/* CSS Selector */.component > :global(.external-class) { margin: 10px;}通过定义样式层级管理样式优先级。
@layer reset, base, components, utilities;@layer components { .button { background: blue; }}通过JavaScript动态生成和管理唯一样式。
function generateUniqueClassName { return `custom-${Math.random.toString(36).substring(2)}`;}const className = generateUniqueClassName;element.classList.add(className);/* 局部重置 */.reset-list { margin: 0; padding: 0; list-style: none;}/* 范围重置 */@scope (.card) { ul { margin: 0; }}来源：不秃头程序员