问题描述
我一直倾向于在我的CSS中采用ABEM，这是一种基于流行的BEM的修改后的命名约定，适用于Atomic Design。
问题：
使用ABEM时，修饰符与基类结合使用，不能单独使用。例如，要修改卡，可以使用'card -blue'而不是'card card-blue'，定义结合以下两个类的css：.card.-blue{}（为简单起见，请保留前缀。）
我经常需要在特定页面上使用范围修饰符，例如，一页中的蓝卡在一页中可能与另一页不同，从而在html中定义了css，如下所示：
class="card -blue -page1"和class="card -blue -page2"具有对第1页和第2页范围的修改/覆盖，仅覆盖这些页面。
我的问题：
如何在基类的CSS文件（card.css）或页面替代/名称空间文件（page1.css）的CSS文件中找到ABEM修饰符，例如“ -blue”？“-blue”类可能是标准的全局修饰符，可在card.css中应用，如下所示：
.card.-blue{ style me }，但page1.css中特定于页面的替代也可能会应用'-blue'修饰符，例如：.page1.-blue { style me }。或在基类中应用标准修饰符，例如card -active被应用在card.css中，同时page1.css应用特殊布局（例如-layoutGrid1），因此html显示2个修饰符，但是在阅读以下内容时，尚不清楚-active是cards.css的标准，而-layoutGrid1是page1.css的：card -active -layoutGrid1 -page1.css。
是否存在某种修改过的ABEM语法，可以清楚地向我的CSS的未来读者展示他们是否需要修改修饰符，是否查看基础/全局CSS或是否查看页面特定的替代内容？ CSS？也许在页面级别的修饰符上使用双破折号，而对于较低级别的修饰符使用单破折号？
谢谢。这是一个很难表达的问题。
2个ABEM资源： https://medium.com/@masacarvalho/atomic-design-system-with-abem-naming-convention-part-1-983d7d6ec3d7 https://css-tricks.com/abem-useful-adaptation-bem/
原子设计资源： https://bradfrost.com/blog/post/atomic-web-design/
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）