CSS系列（44）-- Nesting详解

前端技术探索系列：CSS Nesting详解 📦

致读者：探索样式嵌套的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Nesting，这个强大的样式组织特性。

基础语法 🚀

基础嵌套

/* 简单嵌套 */
.card {padding: 16px;border-radius: 8px;& .header {font-size: 18px;margin-bottom: 12px;}& .content {line-height: 1.5;}
}/* 伪类嵌套 */
.button {padding: 8px 16px;transition: all 0.3s;&:hover {background-color: #f0f0f0;}&:active {transform: scale(0.98);}
}

选择器组合

/* 多层嵌套 */
.container {max-width: 1200px;margin: 0 auto;& .section {padding: 24px;& .title {font-size: 24px;& span {color: #666;}}}
}/* 组合选择器 */
.form {& input,& select,& textarea {border: 1px solid #ddd;padding: 8px;&:focus {border-color: #0066ff;outline: none;}}
}

高级用法 🎯

媒体查询嵌套

.responsive-component {display: grid;gap: 16px;@media (min-width: 768px) {& {grid-template-columns: repeat(2, 1fr);}}@media (min-width: 1024px) {& {grid-template-columns: repeat(3, 1fr);}}
}

主题嵌套

.theme-container {/* 亮色主题 */&[data-theme="light"] {--bg-color: #ffffff;--text-color: #333333;& .card {background-color: var(--bg-color);color: var(--text-color);}}/* 暗色主题 */&[data-theme="dark"] {--bg-color: #1a1a1a;--text-color: #ffffff;& .card {background-color: var(--bg-color);color: var(--text-color);}}
}

实际应用 💫

组件样式

/* 卡片组件 */
.card-component {border: 1px solid #eee;border-radius: 8px;overflow: hidden;& .image {width: 100%;height: 200px;object-fit: cover;}& .content {padding: 16px;& .title {font-size: 20px;margin-bottom: 8px;}& .description {color: #666;line-height: 1.5;}& .actions {margin-top: 16px;display: flex;gap: 8px;& button {padding: 8px 16px;border-radius: 4px;&.primary {background-color: #0066ff;color: white;}&.secondary {background-color: transparent;border: 1px solid #0066ff;color: #0066ff;}}}}
}

布局系统

/* 网格布局 */
.grid-system {display: grid;gap: 24px;& .column {&-4 {grid-column: span 4;}&-6 {grid-column: span 6;}&-12 {grid-column: span 12;}@media (max-width: 768px) {&-4,&-6,&-12 {grid-column: 1 / -1;}}}
}

最佳实践 ⚡

命名约定

/* BEM命名嵌套 */
.block {& .block__element {& .block__element--modifier {/* 样式 */}}
}/* 命名空间 */
.namespace {&-component {&__element {&--modifier {/* 样式 */}}}
}

性能优化

/* 选择器优化 */
.optimized {/* 避免过深嵌套 */& > .direct-child {/* 直接子元素样式 */}/* 限制嵌套层级 */& .important-element {/* 重要元素样式 */}
}/* 模块化组织 */
.module {/* 核心样式 */@import 'module/core';/* 主题变体 */@import 'module/themes';/* 响应式样式 */@import 'module/responsive';
}