html - BEM / ABEM 命名约定：修饰符位置清晰沟通的策略？

Question

我一直倾向于在我的 CSS 中采用 ABEM，这是一种基于流行的 BEM 的修改命名约定，适用于 Atomic Design。

问题：使用ABEM时，修饰符与基类结合使用，不能单独使用。例如，要修改卡片，您可以使用“card -blue”而不是“card card-blue”，定义结合两个类的 css，如下所示：（.card.-blue{}为简单起见，省略了前缀。）

我经常需要限定修饰符以在特定页面中使用，例如一个页面中的蓝卡可能在一个页面中与另一个页面中的不同，从而在 html 中定义 css，如下所示： class="card -blue -page1"并且class="card -blue -page2"page1 和 page2 范围修改/覆盖只是那些页面。

我的问题：如何清楚地显示是否在基类的 CSS 文件 (card.css) 或页面覆盖/命名空间文件 (page1.css) 中找到 ABEM 修饰符，例如“-blue”？

'-blue' 类有可能是一个标准的全局修饰符，像这样在 card.css 中应用： .card.-blue{ style me }但 '-blue' 修饰符也可能被 page1.css 中的页面特定覆盖潜在地应用，如下所示.page1.-blue { style me }：或者在基类中应用标准修饰符，就像card -active在card.css中应用一样，同时page1.css应用了特殊布局（例如-layoutGrid1），因此html显示2个修饰符，但它不是t 清楚 -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-贝姆/

原子设计资源： https ://bradfrost.com/blog/post/atomic-web-design/

标签： htmlcssnaming-conventionsbematomic-design