SCSS开发中footer模块BEM类margin-bottom样式不生效问题

核心问题是CSS选择器和DOM挂载的类名拼写完全不匹配，不存在SCSS编译错误、样式优先级覆盖的问题。

• SCSS中&嵌套语法的编译逻辑：在.footer选择器内部写&__social这类嵌套规则，最终会输出为双下划线分隔的标准BEM类选择器，即.footer__social、.footer__logo、.footer__links这类完整类名
• 实际DOM结构中，所有对应子元素的类名全部使用单下划线作为分隔符：比如footer_logo、footer_social、footer_links、footer_cta，和CSS里定义的双下划线类名是完全独立的两个类，浏览器不会将对应的margin-bottom规则匹配到这些元素上，因此开发者工具的匹配样式列表里根本不会出现这些规则。
• 两个细节可以交叉验证这个结论：
  1. 给规则加!important也无法生效，是因为选择器根本找不到对应的DOM作用对象，优先级再高也没有生效载体
  2. DOM里唯一写法符合双下划线规范的类是最内层的footer__copyright，但对应SCSS里的.footer__copyright块没有写任何样式，所以感知不到规则匹配生效
• 为什么其他模块用相同的SCSS嵌套写法能正常运行：那些模块的DOM类名和SCSS编译输出的双下划线格式是对齐的，没有拼写偏差；只有footer模块的DOM类名统一错用了单下划线分隔符，才出现了局部样式失效的情况。

两种方式二选一，保证SCSS编译输出的类名和DOM上挂载的类名完全一致即可：

1. 修正DOM类名拼写，对齐BEM双下划线命名规范：
   • 把<a class="footer_logo" href="#">改为<a class="footer__logo" href="#">
   • 把<div class="footer_social">改为<div class="footer__social">
   • 把<div class="footer_links col1">改为<div class="footer__links col1">
   • 把<div class="footer_links col2">改为<div class="footer__links col2">
   • 把<div class="footer_cta">改为<div class="footer__cta">
2. 修正SCSS编译输出，对齐项目现有单下划线的命名习惯：
   如果项目内部统一使用单下划线作为BEM元素的分隔符，就把SCSS里所有嵌套的&__xxx写法改为&_xxx，编译后输出的类名就会和DOM现有写法匹配，对应的margin-bottom样式就能正常生效。

补充：.footer选择器本身的公共样式（绑定的自定义背景色、文字颜色、2.5rem内边距、居中文本对齐）可以正常生效，是因为根类名.footer和DOM上的类名完全匹配，和子类的拼写问题没有关联。

内容的提问来源于stack exchange，提问作者P. Vowk