Is Reseting all CSS rules from Theme OK for a Shopify App Block (Theme Extension)

Extensions
1

Our button can include three elements—a main label, an optional icon, and a secondary label below. When I try to inherit the theme’s CSS and layer on ours, unrelated theme rules (margins, paddings, pseudo-elements like ::before/::after, display settings, etc.) frequently break our markup.

Different button display properties across themes also lead to various layout issues.

To isolate our block from theme styles, I’m considering a CSS “reset” scoped to our wrapper, then selectively inheriting only font-family and color:

.wrapper {
  all: initial;
  /* Inherit only these two properties from the Shopify theme: */
  font-family: inherit;
  color: inherit;
}

.wrapper *:not(svg, svg *, [popover], dialog),
.wrapper *::before,
.wrapper *::after {
  all: revert;
}

Would using all: initial plus all: revert in this way will it conflict with Shopify’s theme guidelines or Key principles for app blocks?

In other words, is this approach compliant with Shopify App development standards—especially since we’re aiming for the “Built for Shopify” badge?

Thanks for any insights!

2

Hey Bill,

Could this approach impact on anything outside of the app block? ie: this would not apply to other parts of the page/theme?