You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SASS结合BEM开发:多类修饰符与@extend的优劣势对比

先补充说明下:
自提出这个问题之后,我不光意识到每个修饰符类只能对应一个修饰符,还发现BEM官方推荐给修饰符使用额外类的做法,所以现在已经正式改用这种方式了。


我用SASS搭配BEM开发有段时间了,现在想搞明白:给修饰符用多类,和用SASS的@extend去继承对应块/元素类,这两种方式各自的优劣势是什么?行业里有没有更受青睐的方案?另外我不会在@media查询里跨查询使用类,这会不会对选择方式有影响呀?

多类写法示例:

<div class="btn btn--admin btn--primary"> 

VS

@extend继承写法示例:

.btn { /* 基础样式 */ } 
.btn--admin { 
  @extend .btn;
  /* 修饰符专属样式 */ 
} 
.btn--primary { 
  @extend .btn;
  /* 修饰符专属样式 */ 
}

内容的提问来源于stack exchange,提问作者Tristan Cottam Meulemans

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.29 07:11:44