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），也不依附于其他组件；它有自己的样式文件，不 import card 的变量，也不读取 card 的 CSS 变量。
• .card__list 不是 Block：它是 .card 内部的一个子区域，不具备独立复用价值；如果把它抽出来单独用，大概率缺样式、缺交互逻辑、语义也模糊（是列表？还是卡片里的一个占位区？）。

所以正确结构是：<div class="card"><div class="list"></div></div>。两个 Block 并列，靠组合而非嵌套建立关系。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

修饰符挂错位置导致跨项目失效

常见错误是把修饰符写在子元素上，比如定义 .button__text--large 来放大文字，但调用方只写了 <button class="button button--large"></button>——样式根本不会生效，因为 .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”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！