CSS 最佳实践
命名规范 BEM、文件组织、浏览器兼容、性能优化、代码规范
CSS 最佳实践
代码组织、命名规范、性能优化——让 CSS 在大项目中依然可控。
学完本章你将： 掌握 BEM 命名、文件组织、浏览器兼容、性能优化。
BEM 命名规范
css
/* Block（块） */
.card { }
/* Block__Element（元素） */
.card__title { }
.card__image { }
.card__content { }
/* Block--Modifier（修饰符） */
.card--featured { }
.card--small { }html
<div class="card card--featured">
<h2 class="card__title">标题</h2>
<img class="card__image" src="photo.jpg">
<div class="card__content">内容</div>
</div>文件组织
css/
├── reset.css # 重置默认样式
├── variables.css # CSS 变量/主题
├── typography.css # 字体排版
├── layout.css # 布局系统
├── components/ # 组件样式
│ ├── button.css
│ ├── card.css
│ └── navbar.css
├── pages/ # 页面特定样式
└── utilities.css # 工具类性能优化
css
/* ✅ 用 class，避免后代选择器过深 */
.nav-link { } /* 快 */
/* ❌ nav ul li a { } 慢 */
/* ✅ 动画用 transform/opacity（GPU 加速） */
.box { transition: transform 0.3s; }
/* ❌ .box { transition: width 0.3s; } 触发重排 */
/* ✅ 合理使用 will-change */
.scroll-area { will-change: transform; }浏览器兼容
css
/* 使用 Autoprefixer 自动加前缀 */
/* 或手动加 */
.box {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}