CSS系列（45）-- Scope详解

news2025/1/5 6:18:29

前端技术探索系列：CSS Scope详解 🔒

致读者：探索样式作用域的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Scope，这个强大的样式隔离特性。

基础概念 🚀

作用域定义

/* 基础作用域 */
@scope (.component) {
    .title { color: blue; }
    .content { padding: 16px; }
}

/* 作用域限制 */
@scope (.card) to (.card-inner) {
    .title { font-size: 18px; }
    .text { line-height: 1.5; }
}

/* 多重作用域 */
@scope (.theme-dark) {
    @scope (.button) {
        background: #333;
        color: white;
    }
}

选择器隔离

/* 选择器作用域 */
@scope (.form) {
    :scope {
        display: grid;
        gap: 16px;
    }
    
    input {
        border: 1px solid #ddd;
    }
    
    button {
        padding: 8px 16px;
    }
}

/* 作用域组合 */
@scope (.modal) {
    :scope {
        position: fixed;
        inset: 0;
    }
    
    .overlay {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .content {
        background: white;
        padding: 24px;
    }
}

高级特性 🎯

主题隔离

/* 主题作用域 */
@scope ([data-theme="light"]) {
    :scope {
        --bg-color: white;
        --text-color: black;
    }
    
    .card {
        background: var(--bg-color);
        color: var(--text-color);
    }
}

@scope ([data-theme="dark"]) {
    :scope {
        --bg-color: #1a1a1a;
        --text-color: white;
    }
    
    .card {
        background: var(--bg-color);
        color: var(--text-color);
    }
}

组件隔离

/* 组件作用域 */
@scope (.dropdown) {
    :scope {
        position: relative;
    }
    
    .trigger {
        cursor: pointer;
    }
    
    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        
        &[data-open] {
            display: block;
        }
    }
}

/* 嵌套组件 */
@scope (.tabs) {
    :scope {
        display: flex;
        flex-direction: column;
    }
    
    .tab-list {
        display: flex;
        gap: 2px;
    }
    
    .tab-panel {
        padding: 16px;
        
        @scope (.content) {
            :scope {
                max-height: 400px;
                overflow-y: auto;
            }
        }
    }
}

实际应用 💫

表单组件

/* 表单作用域 */
@scope (.form-component) {
    :scope {
        display: grid;
        gap: 20px;
    }
    
    .form-group {
        display: grid;
        gap: 8px;
    }
    
    .label {
        font-weight: 500;
    }
    
    .input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        
        &:focus {
            border-color: #0066ff;
            outline: none;
        }
        
        &.error {
            border-color: #ff4444;
        }
    }
    
    .error-message {
        color: #ff4444;
        font-size: 14px;
    }
}

卡片组件

/* 卡片作用域 */
@scope (.card-component) {
    :scope {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .header {
        padding: 16px;
        border-bottom: 1px solid #eee;
        
        .title {
            font-size: 18px;
            font-weight: 500;
        }
    }
    
    .content {
        padding: 16px;
        
        p {
            margin: 0 0 16px;
            line-height: 1.5;
        }
    }
    
    .footer {
        padding: 16px;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }
}

性能优化 ⚡

选择器优化

/* 优化选择器 */
@scope (.optimized) {
    /* 直接子元素选择器 */
    > .child {
        /* 样式 */
    }
    
    /* 避免过深嵌套 */
    .important {
        /* 重要样式 */
    }
}

/* 性能考虑 */
@scope (.performance) {
    /* 使用类选择器 */
    .fast {
        /* 样式 */
    }
    
    /* 避免属性选择器 */
    .state-active {
        /* 样式 */
    }
}