当前位置：首页 > news >正文

CSS 嵌套的最佳实践：编写优雅的样式代码

news 2026/5/24 3:13:19

CSS 嵌套的最佳实践：编写优雅的样式代码

代码如诗，嵌套如画。让我们用 CSS 嵌套的艺术，创造出既简洁又优雅的样式代码。

什么是 CSS 嵌套？

CSS 嵌套是一种允许在选择器内部定义其他选择器的语法，它可以使样式代码更加结构化和可读。CSS 嵌套是 CSS Nesting Module 的一部分，现在已经被主流浏览器广泛支持。

基本语法

/* 传统方式 */ .parent { /* 父元素样式 */ } .parent .child { /* 子元素样式 */ } /* 嵌套方式 */ .parent { /* 父元素样式 */ .child { /* 子元素样式 */ } }

嵌套选择器类型

1. 后代选择器

/* 后代选择器 */ .parent { .child { /* 后代元素样式 */ } .grandchild { /* 孙子元素样式 */ } }

2. 子选择器

/* 子选择器 */ .parent { > .child { /* 直接子元素样式 */ } }

3. 相邻兄弟选择器

/* 相邻兄弟选择器 */ .first { + .second { /* 相邻兄弟元素样式 */ } }

4. 通用兄弟选择器

/* 通用兄弟选择器 */ .first { ~ .sibling { /* 所有兄弟元素样式 */ } }

5. 伪类和伪元素

/* 伪类 */ .button { :hover { /* 悬停状态 */ } :active { /* 激活状态 */ } :focus { /* 焦点状态 */ } } /* 伪元素 */ .element { ::before { /* 前伪元素 */ } ::after { /* 后伪元素 */ } }

最佳实践

1. 保持嵌套层级合理

/* 不好的做法 - 嵌套过深 */ .header { .nav { .menu { .item { .link { /* 样式 */ } } } } } /* 好的做法 - 合理嵌套 */ .header { .nav { /* 导航样式 */ } } .nav { .menu { /* 菜单样式 */ } } .menu { .item { /* 菜单项样式 */ } }

2. 使用 & 符号引用父选择器

/* 引用父选择器 */ .button { background: #667eea; &:hover { background: #764ba2; } &.primary { background: #667eea; } &.secondary { background: #764ba2; } } /* 组合选择器 */ .card { border: 1px solid #e0e0e0; &-title { font-size: 1.25rem; } &-content { padding: 1rem; } &-footer { border-top: 1px solid #e0e0e0; } }

3. 嵌套媒体查询

/* 嵌套媒体查询 */ .container { width: 100%; @media (min-width: 768px) { width: 750px; } @media (min-width: 992px) { width: 970px; } @media (min-width: 1200px) { width: 1170px; } }

4. 组织嵌套结构

/* 组织嵌套结构 */ .component { /* 基础样式 */ /* 状态 */ &:hover { /* 悬停样式 */ } &:focus { /* 焦点样式 */ } /* 变体 */ &.primary { /* 主要变体 */ } &.secondary { /* 次要变体 */ } /* 子元素 */ .child { /* 子元素样式 */ } /* 媒体查询 */ @media (min-width: 768px) { /* 响应式样式 */ } }

实际应用示例

1. 卡片组件

.card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; &-header { padding: 1.5rem; border-bottom: 1px solid #e0e0e0; h3 { margin: 0; font-size: 1.25rem; font-weight: 600; } } &-body { padding: 1.5rem; p { margin: 0 0 1rem 0; line-height: 1.6; } } &-footer { padding: 1.5rem; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 0.75rem; .button { padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; cursor: pointer; &.primary { background: #667eea; color: white; &:hover { background: #5a6fd8; } } &.secondary { background: #f8f9fa; color: #333; border: 1px solid #e0e0e0; &:hover { background: #e9ecef; } } } } &:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { &-header, &-body, &-footer { padding: 1rem; } &-footer { flex-direction: column; .button { width: 100%; } } } }

2. 导航栏

.navbar { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1rem 2rem; &-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } &-logo { font-size: 1.5rem; font-weight: bold; color: #667eea; text-decoration: none; } &-menu { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; &-item { &-link { color: #333; text-decoration: none; font-weight: 500; padding: 0.5rem 0; position: relative; &:hover { color: #667eea; } &:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #667eea; transition: width 0.3s ease; } &:hover:after { width: 100%; } } } } @media (max-width: 768px) { padding: 1rem; &-container { flex-direction: column; gap: 1rem; } &-menu { flex-wrap: wrap; justify-content: center; gap: 1rem; } } }

3. 表单组件

.form { max-width: 600px; margin: 0 auto; padding: 2rem; &-group { margin-bottom: 1.5rem; label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; } input, textarea, select { width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 1rem; &:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } &.error { border-color: #dc3545; &:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } } } textarea { resize: vertical; min-height: 120px; } .error-message { margin-top: 0.5rem; font-size: 0.875rem; color: #dc3545; } } &-button { padding: 0.75rem 1.5rem; background: #667eea; color: white; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; &:hover { background: #5a6fd8; } &:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } } @media (max-width: 768px) { padding: 1rem; } }

浏览器兼容性

浏览器	支持情况
Chrome	✅ 112+
Edge	✅ 112+
Safari	✅ 16.4+
Firefox	🚧 开发中

回退方案

/* 现代浏览器 */ @supports (nesting: true) { .component { /* 嵌套样式 */ .child { /* 子元素样式 */ } } } /* 旧浏览器回退 */ @supports not (nesting: true) { .component { /* 基础样式 */ } .component .child { /* 子元素样式 */ } }