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是一款自动视频编辑工具可以将文本、文章或故事转换为视频。