bem通过块名前缀确保样式归属明确：marquee__item表示子元素，marquee--compact控制整体布局，marquee__content--fade限定内容表现，禁用marquee-item等破折号命名以防语义断裂。
直接用 .marquee 这类泛名写样式，公告栏一复用到弹窗或侧边栏里，字体、行高、动画速度就全乱套——BEM 不是加下划线的仪式，而是让每个类名自带上下文，确保 marquee__content 永远只属于 marquee 这个块。
为什么 marquee__item 不能写成 marquee-item
破折号分隔（marquee-item）会被浏览器当作文本节点处理，CSS 选择器无法区分它是块还是修饰符；而双下划线 marquee__item 明确表达“这是 marquee 块里的一个子元素”，JS 切换状态时也方便定位，比如 document.querySelector('.marquee__item--active')。一旦写成 marquee-item，后续加 --paused 修饰符就会变成 marquee-item--paused，语义断裂：这个 paused 到底是 item 的状态，还是整个 marquee 的状态？
marquee--compact 和 marquee__content--fade 的修饰符该挂在哪一级
尺寸、布局类修饰符（如 compact、vertical、full-width）必须挂在 Block 上，即 marquee--compact；内容表现类修饰符（如 fade、highlight、truncate）只能挂在对应 Element 上，即 marquee__content--fade。
-
marquee--vertical✅ 控制整体容器高度、溢出方式、动画方向 -
marquee__content--fade✅ 控制内部文字渐隐逻辑，不影响其他元素 -
marquee--fade❌ 错误：把内容表现强加给块，破坏职责分离 -
marquee__content--vertical❌ 错误：方向是容器级约束，不是内容自身的属性
如何避免动画类名和 BEM 结构冲突
CSS 动画本身不认 BEM，但命名和作用域必须对齐。关键点：
- 动画名用 Block 前缀，比如
@keyframes marquee-scroll，不写@keyframes scroll——防止和其他组件的 scroll 动画冲突 - 动画绑定在
marquee__content上，而不是marquee容器，因为位移的是内容，不是容器 - 悬停暂停用
marquee__content:hover，但必须配合marquee--paused类由 JS 注入，否则无法通过 JS 精确控制暂停/恢复 - 不要在动画帧里写
transform: translateX(calc(-100% - 2rem))这种依赖外部 padding 的计算值——BEM 要求样式可预测，所有偏移量应由marquee__content自身的padding-left或伪元素撑开
BEM 在走马灯场景中最容易被忽略的一点：多实例共存时，每个 marquee 必须是独立 Block，不能靠父容器类名区分。比如两个公告栏分别在 header 和 footer，得各自用 header-marquee 和 footer-marquee，而不是都叫 marquee 再靠 .header .marquee 去选——后者已经违背 BEM “只用类名、禁用后代选择器”的铁律。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
