BEM命名中嵌套块的类名该怎么写才规范？
我最近在用 BEM 写一个商品卡片组件，结构大概是“卡片里有标题、价格、按钮”。按照 BEM 规范，主块是 product-card，那里面的按钮应该叫 product-card__button 没问题。但问题是，如果按钮内部还有个图标，比如用 span 包着 icon，这个图标元素的类名该咋写？
我试过写成 product-card__button__icon，但听说 BEM 不允许双下划线嵌套。也有人建议把按钮单独当成一个块，叫 btn，然后图标是 btn__icon，但这样又感觉和主块脱节了。到底哪种写法才符合 BEM 的最佳实践？
<div class="product-card">
<h3 class="product-card__title">商品名</h3>
<span class="product-card__price">¥99</span>
<button class="product-card__button">
立即购买
<span class="???">🛒</span>
</button>
</div>- 2
回答
24浏览
HTML元素的class命名到底该用驼峰还是短横线？
我在写一个用户卡片组件，纠结class名字怎么起才规范。看到有的项目用驼峰比如userCard，有的用短横线比如user-card，到底哪种更符合前端规范？ 我试过用驼峰命名，但同事说HTML里应该用...
- 1
回答
33浏览
PostCSS 插件里怎么正确处理嵌套的 at-rule？
我写了个 PostCSS 插件想遍历所有的 @media 规则，但遇到嵌套的 @media 就出问题了。比如下面这种结构，插件只处理了外层，内层直接被忽略了： @media (min-width: 7...
- 1
回答
24浏览
嵌套路由的子路由怎么不显示？
我在用 Vue Router 做后台管理系统，父路由是 /admin，想在它下面嵌套一个 /admin/users 的子路由，但页面只渲染了父组件，子路由的内容完全没出来。 我照着文档写了 child...
- 2
回答
67浏览
stylelint 在 PostCSS 中不生效是怎么回事？
我最近在项目里配置了 PostCSS 和 stylelint，想用它来规范团队的 CSS 写法。但不管怎么改规则，PostCSS 编译时都没报错，也不提示任何 stylelint 的警告或错误。我明明...
- 2
回答
44浏览
Nestable 拖拽后怎么获取更新后的层级结构？
我用 Nestable 实现了一个可拖拽的树形菜单，但拖完之后不知道怎么拿到最新的嵌套结构。文档里说要用 serialize 方法，但我调用后返回的是空数组，是不是哪里没初始化对？ 我初始化的代码是这...
- 1
回答
26浏览
双击劫持怎么防？iframe嵌套页面被恶意触发了怎么办？
我最近在做一个后台管理页面，发现被人用iframe嵌套后，通过透明层诱导用户双击触发了删除操作。明明加了X-Frame-Options头，但好像对双击劫持没用？ 我在本地试了下面这种结构，点击外部di...
- 2
回答
31浏览
代码 Review 时怎么判断 CSS 写得是否规范？
最近在团队做 Code Review，看到同事写的这段 CSS 有点拿不准要不要提意见，感觉写法不太规范但又说不上来具体问题在哪： .btn { background: #007bff; color:...
- 1
回答
32浏览
自定义组件的文档怎么写才规范？
我刚封装了一个带搜索功能的下拉选择组件，但不知道怎么写配套的文档。现在团队要求每个组件都要有清晰的使用说明，但我试了直接贴代码，同事说看不懂 props 和事件怎么用。 比如我的组件是这样用的： &l...
- 1
回答
35浏览
postcss-nested 嵌套写法不生效是怎么回事？
我用 Vite + PostCSS 配置了 postcss-nested，但写嵌套 CSS 时完全没效果，编译后还是原样输出，是不是插件没生效？ 我已经在 postcss.config.js 里加了插...
- 2
回答
35浏览
GraphQL查询返回数据结构嵌套太深怎么处理？
我在用Apollo Client调用GraphQL接口时，发现返回的数据嵌套层级特别深，比如user.profile.settings.theme这种，取值的时候老怕写错路径，还容易报undefine...
如果这个按钮只在这个商品卡片里用，那就直接写成
product-card__button-icon，把 button-icon 当作 product-card 的一个完整元素。虽然语义上它是按钮里的图标，但BEM允许这种"元素再包含元素"的写法，只要保证只有一个下划线就符合规范。如果这个按钮是通用的，比如其他地方也会用到"立即购买"这种带图标的按钮，那我建议你用混合写法：
这样按钮同时拥有两个类：
product-card__button表明它是商品卡里的按钮，btn表明它是一个独立的按钮块。图标用btn__icon，完全符合BEM规范，而且按钮的样式可以在其他地方复用。我个人更倾向第二种方式。BEM的核心思想就是"块是独立可复用的组件"，一个带图标的按钮本身就是个小块，强行把它拆散写到主块下面反而破坏了组件的封装性。当然如果你的项目里根本没有复用按钮的需求，第一种写法也没问题，别写成双下划线就行。
正确做法是：按钮单独作为一个块。按钮本质上是个独立组件，完全可以抽出来叫
btn，图标就是btn__icon。写法如下：
注意这里用了混合命名：
product-card__button是元素，表示它在这个卡片里的角色；btn是块，表示它本身是个按钮组件。这样既保留了与主块的语义关系，又遵循了BEM规范。如果你的按钮只在这个卡片里用，不考虑复用，那也可以直接用
product-card__button-icon（单下划线）表示按钮内部的元素，虽然这不是标准BEM写法，但业界确实有人这么干，属于妥协方案。性能上这种写法没任何额外开销，类名还是一样解析。我的建议是优先抽成独立块
btn，复用的时候你就知道有多香了。