Encapsulated plugins "any ideas"

I’m currently updating the css for my responsive redesign template, and I’ve run into an interesting issue with the newer encapsulated plugins.

One of my goals with this redesign was to remove all of the !important declarations from my stylesheet which has been successfully completed.. I’ve had some feedback that using !important is generally considered bad practice, especially when you’re building a template, and I don’t disagree with that.

However, the newer encapsulated plugins seem to create a situation where using !important is sometimes unavoidable.

With an encapsulated plugin, you can run into situations where the plugin’s CSS takes precedence over the template’s styles. When that happens, the only reliable way I’ve found to override a particular style is to add !important to my own CSS rule.

That puts template developers in a difficult position. On one hand, we’re encouraged to avoid !important because it can make CSS harder to maintain and override later. On the other hand, the current override system can effectively force us to use it when working with encapsulated plugins.

I’m not a fan of that approach. It feels like the system is forcing developers to use a CSS technique that we generally try to avoid.

This is the main issue I’m running into with the override system: whenever I need to make a CSS adjustment to an encapsulated plugin, the only way to reliably get that change implemented is often to add !important to the specific style.

I’d be interested in hearing how other developers are handling this. Is there a better way to override encapsulated plugin styles without resorting to !important, or is this currently an unavoidable limitation of the system?

I've hit the same thing, and I don't think !important is actually forced here — it's just the first thing that works. A few options that hold up better:

1. Order your override sheet last. Zen Cart loads CSS in groups (global style*.css, then language, then page-specific, then category/manufacturer/product), and alphabetically within each group. So a stylesheet_zzz_overrides.css in includes/templates/YOUR_TEMPLATE/css/ loads after a plugin's stylesheet_pluginname.css. At equal specificity, last one in the cascade wins — no !important needed. This is the one I'd reach for first, because it survives plugin updates untouched.

2. Use page-specific sheets for page-scoped tweaks. Anything in the page-specific group loads after all the global sheets, so product_info.css in your template beats a plugin's global stylesheet for free.

3. Same-name file override. Encapsulated plugins register their CSS through the normal override system — plugin directory first, then the active template directory as an override. Put a file with the identical filename in your template's css folder and yours replaces theirs outright. Nuclear option though: you've now forked that stylesheet and have to re-merge it every time the plugin updates. Worth it if you're wholesale restyling the plugin, not worth it for two rules.

4. Bump specificity instead of using !important. Prefix with something already in the DOM (#mainWrapper .plugin-thing, or your body class/ID), or just double the class (.plugin-thing.plugin-thing, which is valid and adds specificity without touching markup). One extra selector beats one !important, and it's still overridable later — which is the whole reason we avoid !important in the first place.

Where I do agree with you: option 4 is a specificity arms race, and that's a smell. The real fix is on the plugin authoring side, and I think there are two things worth pushing for:

• Plugins should expose CSS custom properties for colors, spacing, radii, etc. Then a template retheming a plugin sets variables instead of fighting selectors.

• Plugin CSS should be wrapped in a cascade layer: @layer zc-plugins { ... }. Any unlayered rule in a template beats every rule in a layer regardless of specificity. That would solve this categorically — template authors would never need !important or specificity hacks against plugin CSS again, and plugin authors lose nothing. Browser support is universal at this point.

That second one might be worth raising as a discussion on the Zen Cart GitHub as a plugin-authoring convention. Small ask of plugin authors, big win on the template side.

Meanwhile, for what you're doing right now: alphabetical load order plus your template's css directory should get you most of the way there without a single !important.

DBltoe

I have to admit, I wasn’t a fan of the idea of encapsulated plugins at first. But once I figured out how to work around the issues I was running into, I’ve come to appreciate the approach much more.

I think your ideas were good. I was actually able to come up with an even better solution using just CSS. I found that I could override the encapsulated styling by targeting the plugin’s outer <div> (or a specific ID/class on that <div>), essentially increasing the specificity of the CSS.

There will be some trial and error that's part of the challenge using the encapsulated approach.

You can see the example live on my template. (i managed to remove all !important on the entire template).
https://www.zencartdemo.com/

I really like dbltoe's idea of layered CSS. With a convention not only for plugins but the whole ZC, it should be possible to mimic the file override system...