bem在canvas中不直接生效，但其“明确边界、分离职责、可预测变更”思想可迁移：将视觉单元封装为独立函数，样式常量统一收口，参数语义化（如type、size），canvas与svg共用状态映射表和主题源，确保跨技术栈一致性。
Canvas里根本没有CSS，BEM怎么起作用
Canvas本身不解析CSS类名，ctx.fillStyle、ctx.strokeStyle这些属性值都是硬编码或动态计算出来的，BEM命名规范在这里不直接生效。但BEM的思想——「明确边界、分离职责、可预测变更」——完全可以迁移到Canvas的绘图逻辑中。
常见错误是把所有颜色、尺寸、偏移量散落在drawButton()、drawCard()等函数里，改一个圆角半径要搜三四个文件；或者用魔法数字写ctx.fillRect(20, 45, 120, 32)，没人知道20是左边距还是内边距。
- 把每个可复用的视觉单元（如「带图标的状态按钮」「带阴影的卡片轮廓」）当作一个「Block」，封装成独立函数，例如
drawStatusButton() - 函数参数只接收语义化状态，比如
type: 'success' | 'error'、size: 'small' | 'large'，而不是传bgColor: '#28a745' - 所有样式常量（圆角、边框粗细、文字大小）统一收口到一个
theme.js或constants.js里，用BUTTON_RADIUS_SMALL这类命名，而非SMALL_RADIUS（避免脱离上下文）
SVG中BEM类名能用，但得避开DOM陷阱
SVG元素支持class属性，所以<rect class="chart-bar chart-bar--active"></rect>这种写法完全合法，也能被CSS选中。但问题在于：SVG不是HTML，很多CSS特性在SVG里表现异常。
典型现象：.chart-bar--active { fill: red; }生效了，但.chart-bar--active:hover { fill: darkred; }没反应——因为<rect></rect>默认不响应鼠标事件，必须加pointer-events: visible。
- SVG中只对真正需要交互或状态切换的元素挂BEM类，比如
<g class="timeline-track"></g>、<circle class="node__dot node__dot--selected"></circle>，别给每个<path></path>都加类 - 避免用
fill/stroke等内联样式覆盖BEM类，否则调试时DevTools里看到的class存在，但实际渲染被style="fill:#000"劫持 - 如果用React/Vue渲染SVG，禁止在JSX里拼接类名字符串，用
clsx(`${BLOCK}__bar`, { [`${BLOCK}__bar--hovered`]: isHovered })保持一致性
当Canvas和SVG混用时，BEM风格要统一维护点
比如一个数据看板里，折线图用Canvas绘制，图例用SVG实现，两者共用同一套主题色和间距规则。这时BEM不再只是命名习惯，而是跨技术栈的契约。
容易踩的坑是：Canvas代码里写TEXT_SIZE_LABEL = 14，SVG CSS里写.legend__label { font-size: 12px; }，结果字号不一致；或者Canvas里用GRID_LINE_COLOR = '#e0e0e0'，SVG里用.grid-line { stroke: #eee; }，颜色肉眼难分辨但实际不同。
- 把所有视觉常量（颜色、字体、间距、圆角、动画时长）抽成JSON或TS模块，Canvas和CSS都从同一份源读取，例如
import { COLORS } from '@/styles/theme'; ctx.fillStyle = COLORS.primary; - 为Canvas函数设计与BEM语义对齐的参数结构：
drawIcon({ variant: 'warning', size: 'medium', position: 'top-left' })，对应CSS里的.icon--warning.icon--medium - 禁止在Canvas中做“样式推导”，比如根据
status === 'loading'就自动把opacity设为0.6——这个逻辑应该由上层组件决定，并显式传入opacity: 0.6，保持Canvas函数纯渲染
BEM修饰符在SVG中如何表达状态，又不污染Canvas逻辑
SVG可以靠class控制状态，Canvas只能靠参数或状态对象。两者要协同，关键在于「状态定义」必须集中，不能一边在CSS里写.badge--unread，一边在Canvas里写if (isUnread) drawRedDot()。
最麻烦的是状态叠加：比如一个通知图标，既要显示「未读」，又要处于「禁用」态。SVG里可以写class="notification-icon notification-icon--unread notification-icon--disabled"，Canvas里就得确保drawNotificationIcon({ unread: true, disabled: true })能正确组合视觉效果。
- 定义状态映射表，例如
const STATUS_MAP = { unread: 'notification-icon--unread', disabled: 'notification-icon--disabled' }，Canvas和SVG共用同一份key - Canvas函数内部不做状态判断，只做「按需绘制」：传
variant: 'unread'就画红点，传variant: 'disabled'就画灰底，叠加时由调用方组合参数 - 构建时若用PurgeCSS，需在safelist中保留所有可能的状态类正则，如
/notification-icon--(unread|disabled|archived)/，否则SVG里class存在但CSS被删了
真正的复杂点不在语法，而在团队是否接受「状态即接口」——所有视觉差异必须通过明确、有限、可枚举的参数/类名暴露，而不是靠临时加个ctx.globalAlpha = 0.3或class="icon icon--temp-fade"糊弄过去。
