目录名必须与bem块名完全一致，仅用小写字母和中划线，如button对应/components/button/；禁止驼峰、缩写、前缀；多词块名用单中划线连接；块内只存自身资产；元素和修饰符不建子目录；css须严格限定作用域，仅允许以块名为前缀的类名。
目录名必须和块名完全一致，且只允许小写+中划线
组件目录名就是 BEM 的 block 名，不能缩写、不能驼峰、不能加前缀。比如按钮块叫 button，目录就必须是 /components/button/，而不是 /components/Button/ 或 /components/ui-button/。这不是风格偏好，而是让 grep button__icon 能精准定位到所有相关文件，CI 也能用正则自动校验路径合法性。
常见错误现象：/components/Button/ 下放了 Button.tsx 和 index.css，但类名写了 .button__text —— 文件系统大小写敏感时，开发机可能不报错，CI 构建直接 fail；更隐蔽的是，团队成员在不同系统上 clone 后出现路径不匹配。
- 块名含多个单词时，用单个中划线连接：
user-profile→/components/user-profile/，不是userProfile或user_profile - 禁止在 block 目录里混放其他 block 的样式或脚本，比如
/components/button/里出现card.css，CI 规则会立刻拦截 - 目录内只保留该 block 的核心资产：
button.css、button.tsx、button.stories.tsx（如用 Storybook），不塞utils/或hooks/
元素不能单独建目录，修饰符不生成子目录
BEM 的 element（如 button__icon）是语义组成部分，不是独立可复用的 block，因此绝不应新建 /components/button-icon/ 这类目录。它只存在于 button/ 内部，作为 HTML 结构和 CSS 类名的一部分存在。
常见错误现象：为 card__footer-button 单独建 /components/card-footer-button/，结果导致生命周期割裂——按钮逻辑分散在两个地方，样式权重冲突，测试用例无法聚焦。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
modifier（如button--large）只是状态标识，不对应任何文件或目录，全部定义在button.css里 - 如果某个“元素”确实需要跨 block 复用（比如
avatar），它本身就是独立 block，应放在/components/avatar/，由card或user-profile显式引用 - 禁止出现三层嵌套目录，如
/components/button/icon/—— 这等于把button__icon当成了 block，破坏语义闭环
CSS 文件必须严格限定作用域，只写以块名为前缀的类
/components/button/button.css 里只允许出现以 .button 开头的类：包括 .button、.button__icon、.button--disabled，绝不能出现 .icon、.btn 或 .card__button。这是 BEM 独立性的物理保障。
性能影响看似微小，但一旦放开限制，就会引发雪崩式维护问题：改一个 .icon 样式，所有用了 icon 的组件都得回归测试；加一个 .card__button，就等于把 button 的样式耦合进 card 的 DOM 结构里，后续想抽离 button 就得重写样式。
- 用
stylelint-selector-bem-pattern配置规则，自动报错.btn-primary这类漏掉 block 前缀的写法 - 禁止使用嵌套选择器：
.button .button__icon或.button > .button__icon都算违规，应直接写.button__icon - 工具类（如
u-mt-2）走 utility-first 路线，不放进 block 目录，也不受 BEM 约束
大型项目里最容易被忽略的其实是“块边界”的判定
真正难的不是怎么命名，而是判断某个 UI 片段到底是不是独立 block。比如分页器里的 pagination__item 是元素，但 pagination__next-button 如果复用率高、有自己状态逻辑、被多个页面直接 import，那它其实已经具备 block 特征——这时就应该拆成 /components/pagination-next-button/，而不是硬塞在 pagination/ 里。
这种边界模糊点不会出现在文档里，只能靠团队对齐：每次新增组件前，先问一句“它是否会被 import 到非父级上下文中？” 答“是”，就建新 block 目录；答“否”，就作为 element 写进现有 block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
