timeline组件块名必须带作用域前缀（如dash-timeline），禁用泛化命名；元素必须直属块下（timeline__item、timeline__date）；修饰符需语义化正交（如timeline--vertical）；视觉装饰须用伪元素实现。
timeline 组件的 Block 名必须带作用域前缀
直接用 timeline 作块名是高危操作，尤其在微前端或组件库中极易被覆盖。它不表达来源、不区分用途，.timeline .item 这类泛化选择器一加，其他模块的 timeline 或 item 全线崩溃。
实操建议：
- 按项目+组件+类型组合命名，例如
dash-timeline（仪表盘时间轴）、resume-timeline（简历时间轴） - 若封装为 Vue/React 组件，块名必须与组件名对齐：
TimelineCard→timeline-card，而非card-timeline - 禁用
time-line、timeLine、timeline-item这类混用连接符或嵌套语义的写法——timeline-item已经违反 BEM，它把 Element 提前塞进了 Block 名里
timeline__item 和 timeline__date 必须是直属 Element
timeline__item 不是“列表项”，而是时间轴上一个完整事件单元；timeline__date 也不是“日期容器”，它是该事件的时间语义节点。二者都必须直接挂载在 timeline 块下，中间不能插入额外层级。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
timeline__item__date：三段式非法，BEM 不允许__嵌套 -
timeline-item-date：丢失 Block 上下文，CSS 选择器权重失控，JS 查询也难定位 -
<time datetime="2024-03-15">2024年3月</time>外层套<div class="timeline__date">：冗余包裹，破坏语义，读屏器会重复播报
正确结构示例：
<ol class="dash-timeline">
<li class="dash-timeline__item">
<time class="dash-timeline__date" datetime="2024-03-15">2024年3月</time>
<h3 class="dash-timeline__title">项目启动</h3>
<p class="dash-timeline__desc">完成初步设计与需求评审</p>
</li>
</ol>
timeline--vertical 与 timeline--compact 是合法 Modifier
修饰符不是样式补丁，它必须表达一种可预期的状态或布局变体。比如 timeline--vertical 表示主轴方向，timeline--compact 表示密度压缩模式——它们都能被媒体查询、主题切换或运行时 props 控制，且彼此正交。
容易踩的坑：
-
timeline--blue：颜色是表现，不是状态；应归入主题变量或用timeline--primary关联语义 -
timeline__item--large：Modifier 不能降级到 Element 内部，尺寸控制应由timeline--compact统一接管，或通过timeline__item自身响应式规则实现 -
timeline--vertical timeline--horizontal同时存在：互斥修饰符必须在文档中标明禁止叠加，否则 CSS 规则会冲突
timeline__line 和 timeline__dot 必须用伪元素或空标签实现
时间轴的竖线和圆点是装饰性视觉元素，不承载语义，也不参与交互。它们不该出现在 DOM 中作为真实节点，否则会干扰读屏器顺序、增加 JS 查询负担、破坏打印样式。
实操要点：
- 主线用
.dash-timeline::before实现，content: ""+position: absolute+left: 20px，避免影响文字流 - 节点圆点用
.dash-timeline__item::before，配合top: 50%+transform: translateY(-50%)居中对齐主线 - 绝对定位的伪元素必须确保父容器有
position: relative，否则会相对于body定位，一滚动就错位 - 禁用
<div class="timeline__line"></div>这类真实 DOM 节点——它会让屏幕阅读器读成“一个线条”，而实际用户需要听到的是“2024年3月，项目启动”
timeline__date 都能被读屏器准确播报、被搜索引擎识别为时间点、被 JS 模块安全复用——BEM 在这里不是命名习惯，是边界契约。 
