CSS代码复用性太低怎么办_通过BEM结构提升组件模块化

BEM 能让 CSS 更易复用，因其通过「块__元素--状态」命名强制绑定样式与结构，明确依赖关系，避免全局冲突；补 BEM 应渐进式改造高频模块，严守命名规范；它不与 CSS-in-JS 或 Tailwind 冲突，但需统一风格避免混用。为什么 BEM 能让 CSS 更容易复用因为传统命名（比如 .header、.btn）没上下文，一复制到新页面就冲突或失效；BEM 强制把「组件名 + 角色 + 状态」塞进类名里，让样式天然绑定结构，挪到哪都认得清自己该管谁。关键不是加不加双下划线，而是靠命名暴露依赖关系：一个 .card__title 明确表示“我只属于 .card，不 standalone 存在”，改它不用怕误伤别处。怎么给现有项目补 BEM 不翻车别重写全部 CSS，优先从高频复用的模块开始，比如弹窗、表单控件、卡片列表。补的时候注意三点：组件根元素必须带 BEM 块名（如 .modal），不能只写修饰符或元素子元素名必须以块名为前缀 + __（如 .modal__close），禁止出现 .modal .close 这种松散组合状态类统一用 -- 开头（如 .modal--loading），且只作用于块根，不挂在子元素上示例：旧写法 .user-card .name → 新写法 .user-card__name；旧 .active → 新 .user-card--selected。立即学习“前端免费学习笔记（深入）”；BEM 和 CSS-in-JS 或 Tailwind 冲突吗不冲突，但目标不同：BEM 解决的是「手写 CSS 的命名契约」，而 CSS-in-JS 本质是运行时生成样式，Tailwind 是原子类组合。如果你用 styled-components，仍建议在组件内按 BEM 思维组织 class 名（如 className={`${prefix}__header`}）；用 Tailwind 则不必套 BEM，但要注意原子类堆叠后语义模糊的问题——比如 flex items-center p-4 bg-gray-50 复用时很难一眼看出这是个「卡片头部」。 Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。