为什么SCSS教程无需@extend即可继承样式，我的代码却需要？

• 核心原因是HTML类名的使用和教程不一致，和SCSS版本规则调整没有任何关系。
  BEM命名规范中，--开头的是修饰符类，本身不能独立使用，必须和对应的原始元素类同时挂载在同一个DOM元素上才能生效。教程中的对应元素HTML写法为：

  <div class="card__picture card__picture--1">
  

  两个类同时存在时，card__picture的公共样式会自然生效，card__picture--1只需要写差异化的背景图属性即可。你当前的HTML大概率只挂载了card__picture--1单个类，自然无法触发公共样式。
• 不推荐你使用@extend的方案
  该方案虽然能实现效果，但会导致SCSS编译后生成冗余的群组选择器，还容易引发不必要的样式优先级冲突。符合规范的解法是直接调整HTML结构，给对应元素同时添加原始元素类和修饰符类即可。
• 你需要补充学习的知识：
  1. BEM命名规范的核心使用规则，区分块、元素、修饰符三类命名的适用场景
  2. CSS多类名叠加生效的基础逻辑
  3. SCSS嵌套语法和最终编译生成的CSS代码的对应关系，你提供的SCSS代码如果去掉@extend，编译后会生成两个完全独立的CSS选择器，二者本身没有任何继承关系：

  .card__picture {
    background-size: cover;
    height: 23rem;
    background-blend-mode: screen;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
  .card__picture--1 {
     background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark),
        url(../img/nat-5.jpg);
  }
  

内容的提问来源于stack exchange，提问作者Kyle Rayner