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?

3

Hi Liam,

It should not affect anything oustide the app block because we plan to use the block’s random generated id that Shopify provides as a selector.

Something like this:

#shopify_block_1234567890 {
   .wrapper {
        color: white;
   }
   // other CSS...
}

Big fan of your work btw!

Looking forward to your answer!

4

Have a look at Web Components and the ‘shadow DOM’, you’ll be insulated from the outside world.

There are some trade offs of course! hint you can use CSS variables to pass down settings.