CSS如何优雅地重用UI代码片段_通过BEM命名规范抽取公共模块

BEM通过block-element-modifier三层命名解耦视觉与功能，提升可维护性：block为独立单元，element属其结构，modifier仅控外观/状态。为什么直接复制粘贴CSS模块总在改需求时崩盘因为没把“视觉区块”和“功能语义”解耦。比如一个.card在列表页是横向排列，在详情页又得加阴影+圆角+内边距——硬塞一堆!important或靠父级选择器强行覆盖，后面人根本不敢动。真正能重用的不是样式，而是「可预测的行为边界」：这个类名只管结构，那个类名只管皮肤，第三个只管状态。BEM强制你把这三层写进名字里，不是为了炫技，是让git blame时一眼看出谁动了哪块逻辑。block对应独立UI单元（如header、search-form），不依赖上下文element必须属于某个block（如search-form__input），不能单独存在modifier只描述外观/状态变化（如search-form--compact），不改变结构怎么把现有CSS快速转成BEM而不推倒重来别一上来就重命名所有类。先锁死一个高频改动的模块，比如.user-card——它经常被加新字段、换背景、适配暗色模式。拆解三步走：.user-card → block<br>.user-card__avatar → element<br>.user-card--dark → modifier然后把原CSS里所有.user-card .avatar这类后代选择器全干掉，换成.user-card__avatar。这样改--dark时，只动修饰符样式，不影响头像尺寸逻辑。立即学习“前端免费学习笔记（深入）”； Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台，擅长于生成带有文本的图像，如LOGO上的字母、数字等。