Block独立性指其脱离页面结构后仍功能完整、视觉自洽、语义明确；.card不应含margin等布局样式，仅定义自身样式；.list是Block而.card__list不是；修饰符必须作用于根节点。
Block 的独立性不是“能用就行”，而是指它在脱离当前页面结构、不依赖父级样式、不硬编码布局规则的前提下，仍能保持功能完整、视觉自洽、语义明确。做不到这点，复制到新项目里第一件事就是改 CSS。
为什么 .card 不能写 margin-bottom
因为 margin 是布局职责，不是卡片自身功能的一部分。一个 .card 在网格中可能需要 margin: 0，在表单里可能要 margin-top: 1rem，在弹窗 footer 里甚至该贴底。一旦你把 margin-bottom: 1.5rem 写死在 .card 里，它就从“卡片”退化成“带固定下边距的卡片”——这个类名已失真。
真正该由 .card 定义的，只有它自己内部的事：padding、border-radius、box-shadow、background、font-size、cursor。所有向外伸展的尺寸和位置，都该交给包裹它的容器（如 .grid-col、.form-section）或布局工具类（如 .spacing-mb）去管。
.list 和 .card__list 哪个才是 Block
看它能不能独立存在、有没有完整语义。
立即学习“前端免费学习笔记（深入）”；
-
.list是 Block：删掉它，页面就缺了一组可滚动/可分页/可筛选的条目列表；命名是名词，不带位置（不是.sidebar-list），也不依附于其他组件；它有自己的样式文件，不 importcard的变量，也不读取card的 CSS 变量。 -
.card__list不是 Block：它是.card内部的一个子区域，不具备独立复用价值；如果把它抽出来单独用，大概率缺样式、缺交互逻辑、语义也模糊（是列表？还是卡片里的一个占位区？）。
所以正确结构是：<div class="card"><div class="list"></div></div>。两个 Block 并列，靠组合而非嵌套建立关系。
修饰符挂错位置导致跨项目失效
常见错误是把修饰符写在子元素上，比如定义 .button__text--large 来放大文字，但调用方只写了 <button class="button button--large">——样式根本不会生效，因为 .button--large 没绑定任何规则，而 .button__text--large 又没被加到 DOM 上。
修饰符必须作用于 Block 根节点，并且所有相关变化都要显式声明：
- ✅ 正确：
.button--large { padding: 0.75rem 1.5rem; font-size: 1.125rem; } - ❌ 错误：
.button__text--large { font-size: 1.125rem; }（子元素修饰符无法被根节点触发） - ⚠️ 更糟：
.button--large .button__text { font-size: 1.125rem; }（后代选择器破坏隔离性，且无法跨项目复用）
真正跨项目可用的 Block，必须做到：只靠一个类名（如 .button--large）就能驱动整块视觉变化，不依赖 DOM 层级、不依赖父类、不依赖 JS 动态加类到子节点。
Block 独立性的最后一道检验，是你敢不敢把它整个文件夹拖进另一个项目，只改 HTML class 名，不碰一行 CSS 就能跑通。如果不行，问题不在工具链，而在 Block 是否真的被当成“功能单元”来设计，而不是“当前页面里这个 div”。
