- You are using card-mod for styling a conditional element in a wrong way. Check the link I gave earlier (card-mod thread → …).
- Strongly suggest you to not use card-mod to style an element if it may be done by a native “style” option.
The latter point:
- Assume you need to style some sub-element inside an element (for instance, a background of “span” UoM part of “state-badge”). It may be only done by card-mod.
- Assume you need to colorize a “state-label” dynamically. Set a “color” property inside a native “style” option to some CSS variable - which is set by card-mod (i.e. card-mod is only used to set a variable).
- Assume you need to define an animation for some element. It may be only done by card-mod.
Also:
4. Assume you need to mass-style many elements: all “state-badge” elements must have a red background. Then use card-mod to define a corr. CSS variable on a card’s level - then elements will use this changed variable automatically.
5. If you need to style many elements similarly (if it cannot be achieved in pt. 4) - it may be done either on an element’s level by using yaml-anchors for repeating code (see pts. 1,3 above) or it may be done on a card’s level (need to define DOM paths to each element; a bit cumbersome; could be unstable).